如何设置第一个< 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屋！