如何设置第一个< li>的HTML父ul中的元素 [英] How to set the HTML of the first <li> element in the parent ul
问题描述
我正在页面上进行一个简单的JQuery AJAX更新,我只想使用服务器返回的结果(只是一个数字)来更新第一个列表元素.
我的HTML有点像这样(伪):
<ol>
<li>
<ul class="product-controls">
<li>101</li> <!-- I want to update this element -->
<li><a name="PushUp">Push Up</a></li>
<li><a>Push Down</a></li>
</ul>
</li>
<li>
<ul class="product-controls">
<li>5</li> <!-- I want to update this element -->
<li><a name="PushUp">Push Up</a></li>
<li><a>Push Down</a></li>
</ul>
</li>
<li>
<ul class="product-controls">
<li>33</li> <!-- I want to update this element -->
<li><a name="PushUp">Push Up</a></li>
<li><a>Push Down</a></li>
</ul>
</li>
</ol>
当用户单击Push Up
或Push Down
时,我对服务器进行AJAX更新,并返回一个数字. 服务器知道要更新哪个产品(我排除了此代码,因为该示例不需要此代码)我想用该编号更新第一个li
.我已经尝试过此代码,但似乎更新了第二个li
.即,它用数字更新"Push Up
" li
.我不明白为什么?
$(this).parents("ul.product-controls li:first").html(result);
result
只是从服务器发回的号码.
完整的jQuery代码:
$('a[name="PushUp"]').on('click', function(event) {
$.ajax({
context: this,
type: "post",
url: "page.cfm",
data: $.param(data),
dataType: "json",
beforeSend: function() {
},
success: function(result) {
$(this).parents("ul.product-controls li:first").html(result);
},
complete: function() {},
error: function(a) {
alert("An error has occured. Please try again.");
}
});
event.preventDefault();
});
您可以这样使用,使用closest()
获取父级ul
并找到li:first
以在ul
中获得第一个li
. >
注意:-假设$(this)
是定位标记的实例.
$(this).closest("ul.product-controls").find("li:first").html(result);
修改的ajax调用-
$('a[name="PushUp"]').on('click', function(event) {
var $this = $(this);
$.ajax({
context: $this,
type: "post",
url: "page.cfm",
data: $.param(data),
dataType: "json",
beforeSend: function() {
},
success: function(result) {
$this.closest("ul.product-controls").find("li:first").html(result);
},
complete: function() {},
error: function(a) {
alert("An error has occured. Please try again.");
}
});
event.preventDefault();
});
I'm doing a simple JQuery AJAX update on a page, and I just want to update the first list element with the result thats returned from the server (its just a number).
My HTML is a bit like this (psuedo):
<ol>
<li>
<ul class="product-controls">
<li>101</li> <!-- I want to update this element -->
<li><a name="PushUp">Push Up</a></li>
<li><a>Push Down</a></li>
</ul>
</li>
<li>
<ul class="product-controls">
<li>5</li> <!-- I want to update this element -->
<li><a name="PushUp">Push Up</a></li>
<li><a>Push Down</a></li>
</ul>
</li>
<li>
<ul class="product-controls">
<li>33</li> <!-- I want to update this element -->
<li><a name="PushUp">Push Up</a></li>
<li><a>Push Down</a></li>
</ul>
</li>
</ol>
When a user clicks on Push Up
or Push Down
, I do an AJAX update to the server and it returns me a number. The server knows which product to update (I excluded this code because its unnecessary for this example) I want to update the first li
with this number. I have tried this code but it seems to update the second li
. That is, it updates the "Push Up
" li
with the number instead. I don't understand why?
$(this).parents("ul.product-controls li:first").html(result);
result
is just the number sent back from the server.
Full JQuery code:
$('a[name="PushUp"]').on('click', function(event) {
$.ajax({
context: this,
type: "post",
url: "page.cfm",
data: $.param(data),
dataType: "json",
beforeSend: function() {
},
success: function(result) {
$(this).parents("ul.product-controls li:first").html(result);
},
complete: function() {},
error: function(a) {
alert("An error has occured. Please try again.");
}
});
event.preventDefault();
});
You can use like this, get parent ul
using closest()
and find li:first
to get first li
inside ul
.
Note:- assuming that $(this)
is an instance of anchor tag.
$(this).closest("ul.product-controls").find("li:first").html(result);
modified ajax call -
$('a[name="PushUp"]').on('click', function(event) {
var $this = $(this);
$.ajax({
context: $this,
type: "post",
url: "page.cfm",
data: $.param(data),
dataType: "json",
beforeSend: function() {
},
success: function(result) {
$this.closest("ul.product-controls").find("li:first").html(result);
},
complete: function() {},
error: function(a) {
alert("An error has occured. Please try again.");
}
});
event.preventDefault();
});
这篇关于如何设置第一个< li>的HTML父ul中的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!