jquery newb，理解選擇器和索引的問題

我在理解jQuery中的選擇器和索引如何工作時遇到了一些麻煩。我希望能夠編寫一些基於類屬性操作html元素的函數，並且我意識到，當我嘗試使用index（）方法或prevAll（）。length來獲取元素集合中某個元素的位置時，我並不總能得到預期的結果。jquery newb，理解選擇器和索引的問題

下面，我有一段jquery代碼，它爲類.element_list的所有內容做了一些事情，然後在類的所有內容中加入.element_list_item。我有兩個.element_lists，A和B，所有這些都提醒我.element_list_items的索引。對於列表A，索引按照預期返回爲0和1。在列表B中，我添加了一個沒有class屬性的add元素，所以在我看來，它不應該被我的jquery代碼抓住，但是兩個.element_list_items會返回索引1和2，而不是0和1。。

這是爲什麼？我的選擇器正在尋找與.element_list_item類和包含.element_list的ID的類有關的元素，那麼爲什麼添加的thead會影響tbodies的位置呢？

任何幫助理解這一點，表示讚賞。

<script language="javascript" type="text/javascript"> 
$(document).ready(function() 
{ 
$('.element_list').each(function() 
{ 
    var list_id = $(this).attr('id'); 
    var first_item_id = $(this).find('.' + list_id + '.element_list_item:eq(0)').attr('id'); 

    alert('List and first list item: ' + list_id + ' - ' + first_item_id);   

    $(this).find('.' + list_id + '.element_list_item').each(function() 
    { 
     var list_item_id = $(this).attr('id'); 
     var index = $(this).prevAll().length; 

     alert('List item and its index: ' + list_item_id + ' - ' + index); 
    }); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" name="form1" method="post" action="" enableviewstate="true"> 
<br /> 
<br /> 
<table class="table_noborder"> 
    <thead> 
     <tr> 
      <td>List A</td> 
     </tr> 
    </thead> 
    <tbody id="list_A" class="element_list"> 
     <tr> 
      <td> 
       <table> 
        <tbody id="list_A_item0" class="element_list_item list_A"> 
         <tr> 
          <td>First Item</td> 
         </tr> 
        </tbody> 
        <tbody id="list_A_item1" class="element_list_item list_A"> 
         <tr> 
          <td>Second Item</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<table> 
    <thead> 
     <tr> 
      <td>List B</td> 
     </tr> 
    </thead> 
    <tbody id="list_B" class="element_list"> 
     <tr> 
      <td> 
       <table> 
        <thead> 
         <tr> 
          <td>Header</td> 
         </tr> 
        </thead> 
        <tbody id="list_B_item0" class="element_list_item list_B"> 
         <tr> 
          <td>First Item</td> 
         </tr> 
        </tbody> 
        <tbody id="list_B_item1" class="element_list_item list_B"> 
         <tr> 
          <td>Second Item</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</form> 
</body> 
</html>

來源

2012-12-20 Mike

看看http://api.jquery.com/prevAll/我在想prevAll（'。element_list'）可能會有所幫助。我以前從未使用過，因此請繼續測試。 – Huangism

您有$（this）.find（'。'+ list_id +'.element_list_item'），但您在標記中沒有使用.element_list_item類。 –

使用.index()沒有參數將得到它的索引相比，所有的兄弟姐妹。您可以選擇傳遞給它在比較與收集檢查

所以

$('#list_B_item0').index() // will return 1 since thead(it's prev sibling) is in index 0

但

$('#list_B_item0').index('.element_list_item.list_B') // returns 0 since it will compare it's index with the collection

它也可以做其他的方式

$('.element_list_item.list_B').index('#list_B_item0') // returns 0

來源

2012-12-20 20:25:43

您已解決我的問題。感謝您幫助我理解這些方法的工作原理。 – Mike

jquery newb，理解選擇器和索引的問題

回答

相關問題