javascript - 在 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

使用 closest 代替系列 parent 调用.使用 find 而不是一系列 children 调用.这样，您可以在不影响代码的情况下对 HTML 结构进行更多重大更改。

例如 (请注意，我已将 listitem 更改为一个类，请参阅下文了解原因；此外，size() 多年前已被弃用，请使用长度):

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

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

---

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

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