Question

我正在页面上做一个简单的JQuery AJAX更新，我只想用服务器返回的结果更新第一个列表元素（它只是一个数字）。

我的HTML有点像这样（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>

当用户点击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();
        });

Answer 1

您可以这样使用ul获取父closest()，然后找li:first获取li内的第一个ul。

注意： - 假设$(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();
        });

Answer 2

问题是您的parents()未使用正确的选择器， li 不是 li 的父级。您可以使用parents('ul')然后找到第一个 li 或只是

 $(this).parent().find('li:first-child').html(result);

编辑以匹配范围

$('a[name="PushUp"]').on('click', function(event) {
   var $this = $(this);
   $.ajax({
     ... 
     success:function(result){
        $this.parent().find('li:first-child').html(result);
     }
   });
});

Answer 3

您可以使用Class或ID：

执行此操作

$(".product-controls").children().eq(0).html(result);

如果你使用ajax this应该是ajax请求的对象而不是超链接。您可以使用console.log(this)进行检查，然后您会发现这涉及哪个DOM元素

Sample

Answer 4

尝试使用：first-child selector

$("ul.product-controls li:first-child").html(result);

Answer 5

你必须得到父母，然后去第一个li，这是一个好方法

$(this).parents('ul').find("li:first").html(result);

<强>更新

这是一个完整的代码：;）

$('li.inner a').click(function(){
    var myUL=$(this).parent().parent();
    myUL.find("li:first").html("5");
});

OR

$('li.inner a').click(function(){
      $('ul.product-controls').find("li:first").html("for example: 5");
});

Answer 6

这将有效，最接近父母。你首先需要找到给定类的第一个ul，然后在其中寻找一个孩子：）

$(this).closest("ul.product-controls").find("li:first").html(result);

Answer 7

你可以这样做：

        <ol>
        <li>
            <ul class="product-controls">
            <li>101</li> <!-- I want to update this element -->
            <li><a onclick="testFunction('up',this);">Push Up</a></li>
            <li><a onclick="testFunction('down',this);">Push Down</a></li>
            </ul>
        </li>
        </ol>

        <script>
            function testFunction(passValue,curObj)
            {
                $(curObj).parent('li').parent('ul.product-controls').find("li:first").html(passValue);
            }
        </script>

如何设置父ul </li>中第一个<li>元素的HTML

7 个答案: