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