Question

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

请参阅我想要开始计算的地方（标有“我从这里开始”的文字）。

HTML：

<div class="main_set">
    <div class="child_set">
        <div class="child_set">
            <div class="child_set">I start here!</div>
        </div>
        <div class="child_set"></div>
    </div>
    <div class="child_set">
        <div class="child_set"></div>    
    </div>
</div>

我已经尝试了几件事来计算3 例如我上次的尝试：

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

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

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

Answer 1

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

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

另见this example。

Answer 2

如果您想从child_set的div开始计算所有I start here!，您可以这样做：

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

这会给你3。添加了1，因为您的文字I start here!的div也有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);
    });

Working demo

看看另一个演示：Link
在这里你可以看到它适用于任何div。

Answer 4

使用.children()代替.find()

here clearly said

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

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

4 个答案: