在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

您可以使用最接近和找到。目前，您有四個具有相同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(); 

Answer 2

而是個系列的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。