javascript - 在不知道匹配元素的嵌套位置的情况下选择匹配元素，但不选择这些匹配元素的子元素

Question

请建议一个更好的标题，以便其他用户更容易找到此问题。

我正在尝试选择父元素的子元素，但该子元素可能是子元素的子元素，并且嵌套子元素的数量没有限制。我想选择该 child ，但如果许多嵌套 child 中有该 child 的 child ，我不希望选择该 child 。例如:

<div class="section">
<div>  <!--First nested child (Take this and repeat as many times as you want within the parent 'section' class, structure of nested children changing each time.)-->
    <div>  <!--Second nested child (Can have potentially infinite sub-nests like first, second, etc.)-->
        <div class="block">  <!--Select this -->
        Select
            <div>
                <div class="block">  <!--DONT select this -->
                Don't select
                    <div class="section">
                        <div>  <!--More unknown nestings to an assumed infinite degree-->
                            <div class="block">  <!--Select this-->
                            Select
                                <div>
                                    <div class="block">Don't select</div>  <!--DONT select this -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <div>
        <div class="block">  <!--Select this -->
        Select
            <div>
                <div class="block">  <!--DONT select this -->
                Don't select
                    <div class="section">
                        <div>  <!--More unknown nestings to an assumed infinite degree-->
                            <div class="block">  <!--Select this-->
                            Select
                                <div>
                                    <div class="block">Don't select</div>  <!--DONT select this -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

这看起来非常糟糕，但我们的想法是，我们只想选择任何子级中的第一个出现，然后不再选择。

我显然更喜欢 CSS 来进行此选择，但是如果需要，我们可以使用 jQuery 选择器。我不确定 CSS 中是否可以实现。

给你玩的 fiddle :https://jsfiddle.net/78b3c6xh/1/

There are three solutions to this question. I've selected the pure CSS one from Arman P. as the answer because that was what the question asked for in preference and it is the fastest and simplest of the solutions.

The second best is from Susanne Peng due to simplicity and minimal use of jQuery. Not sure about efficiencies, but it works.

The third is ibrahim mahrir who was the first to solve, and utilizes a custom javascript function with dependency on jQuery.

Recommend using the CSS solution if possible in this situation. Working fiddle with solution is in the comments on that answer.

Answer 1

我不认为仅使用 CSS 就可以实现这一点。

使用 jQuery 的解决方案:

$('.section').each(function() {
    $(this).find('.block').first().css('color', 'blue');
});

在这里摆弄:https://jsfiddle.net/78b3c6xh/2/

如果在一个 .section 下可能存在多个子 .block，您可以采取如下方法:

$('.block').each(function() {
    var $closest = $(this).parent().closest('.section, .block');
    if ($closest.hasClass('section')) $(this).css('color', 'blue');
});

在这里摆弄:https://jsfiddle.net/78b3c6xh/5/