如何使用jquery从子级到父级查找元素计数？

我有一个小问题，我需要计算元素的嵌套级别。 问题是父元素可以包含多个子元素，子元素可以拥有自己的子元素。

请看我想开始计数的地方（标有“我从这里开始”的文字）。

HTML：

 
 
 
I start here!
 
 
 
 
 
 
  

我已经尝试了几件事来计算3。
例如我最后一次尝试：

 $(this).closest('.main_set').find('.child_set'); 

这个显然会返回6计数所有child_sets。

如何将child_set元素从起始位置计数到main_set ，仅考虑嵌套。 所以基本上在我的例子中如何获得计数3？

Answer 1

您可以使用此中的parents（）来查找所有父项（使用特殊选择器）; 对于长度，你必须为当前添加一个。

 alert($(this).parents('.child_set').length + 1); 

另见本例 。

Answer 2

如果你想从div开始计算所有child_set ， I start here!说I start here! ，你会这样做：

 $(this).parents('.child_set').length + 1 

这会给你3 。 添加1是因为你带有文字的div I start here! 还有child_set类。

文档：

• http://api.jquery.com/parents/

Answer 3

您必须调用stopPropagation或者它将调用父事件，因为它们具有相同的类child_set 。

  $('.main_set').on('click', '.child_set', function(e) { e.stopPropagation(); console.log($(this).parents('.child_set').andSelf().length); }); 

工作演示

看看这个其他的演示： 链接
在这里你可以看到它适用于任何div。

Answer 4

使用.find()而不是.find()

这里清楚地说

.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）。