多级使用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