多級使用jQuery .parent（）。eq（n）dosn't work

Question

我讀過.parent（）。parent（）。 ...將sholud替換爲.parent（）。eq（n），而n是級別。 綜觀演示，.parent（）。親本（）不等於.parent（）。方程（1）

HTML

<table id="Manager_tblPages" class="Manager_tblPages"> 
    <tbody> 
     <tr class="Manager_trResultHeader"> 
      <td class="td1"> 
       <span class="Manager_cbxCheckAll"> 
        <input id="cphBody_cphBody_Manager_cbxCheckAll" type="checkbox" name="ctl00$ctl00$cphBody$cphBody$Manager_cbxCheckAll"></input> 
       </span> 
      </td> 
     </tr> 
    </tbody> 
</table> 

JS

$('.Manager_cbxCheckAll input').change(function() { 
    alert($(this).parent().attr('class')); 
    alert($(this).parent().eq(0).attr('class')); 
    alert($(this).parent().parent().attr('class')); 
    alert($(this).parent().eq(1).attr('class')); 
}); 

jsfiddle Demo

有什麼建議嗎？

Answer 1

.parent()返回單包含當前選定元素的元素，因此使用.eq()是沒有意義的。

有可能要使用.parents()作爲返回所有的父元素的和.eq()預期應該再工作。

Updated Fiddle using parents()

Answer 2

您需要使用.parents()，因爲.parent()只返回一個元素。

$('.Manager_cbxCheckAll input').change(function() { 
    console.log($(this).parents().attr('class')); 
    console.log($(this).parents().eq(0).attr('class')); 
    console.log($(this).parent().parent().attr('class')); 
    console.log($(this).parents().eq(1).attr('class')); 
}); 

演示：Fiddle

---

但它會是更好的目標使用.closest()這些元素就像

$(this).closest('span').attr('class') 
$(this).closest('td').attr('class') 

演示：Fiddle

Answer 3

您應該使用.parents()而不是.parent()。

從文檔：

The .parents() and .parent() methods are similar, except that the latter only travels a 
single level up the DOM tree. Also, $("html").parent() method returns a set containing 
document whereas $("html").parents() returns an empty set. 

試試這個：

$('.Manager_cbxCheckAll input').change(function() { 
     alert($(this).parent().attr('class')); 
     alert($(this).parents().eq(0).attr('class')); 
     alert($(this).parent().parent().attr('class')); 
     alert($(this).parents().eq(1).attr('class')); 
    }); 

DEMO

Answer 4

使用.parents()代替.parent()：

$('.Manager_cbxCheckAll input').change(function() { 
    console.log($(this).parent().attr('class')); 
    console.log($(this).parents().eq(0).attr('class')); 
    console.log($(this).parent().parent().attr('class')); 
    console.log($(this).parents().eq(1).attr('class')); 
}); 

Working Demo

Answer 5

可以使用.parents()代替.parent()：

console.log($(this).parents().eq(1).attr('class')); 

但是代替多個.parent()或.parents()和.eq()，您可以使用.closest()代替：

對於每個元素t中，通過測試元素本身並遍歷其DOM樹中的 祖先，獲得與 選擇器匹配的第一個元素。

$('.Manager_cbxCheckAll input').change(function() { 
    alert($(this).parent().attr('class')); 
    alert($(this).closest('span').attr('class')); 
    alert($(this).parent().parent().attr('class')); 
    alert($(this).closest('td').attr('class')); 
}); 

Updated Fiddle