在 JQuery 中使用 parent() 和 children() 方法的缺点

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

而不是系列parent 调用，使用closest。而不是一系列的children 调用，使用find。这样一来，您就可以对 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();