Question

我在JQuery中经常使用parent（）和children（）方法。通常我会做这样的事情：

<div id="somediv">
    <ul>
        <li id="listitem">item one</li>
        <li id="listitem">item two</li>
        <li id="listitem">item three</li>
        <li id="listitem">item four</li>
    </ul>

    <ol>
        <li id="anotherlist">
            <button id="addItem">additem</button>
        </li>
    </ol>
</div>

$("#addItem").click(function(){
    var num = $(this).parent().parent().parent().children().children("#listitem").size();
    alert(num);
});

我真正想要解决的主要问题是，如果网页布局发生变化，那么显然每个方法的调用次数也需要改变。我并不特别觉得以我的方式使用它们一定是解决问题的最好方法。

基本上，当您单击按钮时，它只显示第一个列表中的项目数。（很抱歉没有说明。）

Answer 1

使用closest而不是系列parent来电。使用find代替children来电的系列。这样，您可以对HTML结构进行更多重大更改，而不会影响您的代码。

例如（请注意我已将listitem更改为某个类，请参阅下文了解原因;同时，size()多年前已被弃用，请使用length）：

$("#addItem").click(function(){
    var num = $(this).closest("#somediv").find(".listitem").length;
    alert(num);
});

当然，在该示例中您不需要closest，因为#somediv是ID选择器，但如果它是类选择器，或其他结构......

正如Tushar Gupta指出的那样，您的HTML无效。您不能对多个元素使用相同的id值，id值必须是唯一的。（因此，“标识符”一词。）

在您的情况下，您可能想要使用class。

Answer 2

您可以使用最近和查找。目前，您有四个具有相同ID的元素，即listitem您应该使用唯一ID。您可以使用常见class代替

var num = $(this).closest('#somediv').find("#listitem").size();

使用普通类和唯一ID。

<强> HTML

<div id="somediv">
    <ul>
        <li id="listitem1" class="someclass">item one</li>
        <li id="listitem2" class="someclass">item two</li>
        <li id="listitem3" class="someclass">item three</li>
        <li id="listitem4" class="someclass">item four</li>
    </ul>

    <ol>
        <li id="anotherlist">
            <button id="addItem">additem</button>
        </li>
    </ol>
</div>

<强> JQuery的

var num = $(this).closest('#somediv').find(".someclass").size();

在JQuery中使用parent（）和children（）方法的缺点

2 个答案: