指定后代DOM节点的选择

Question

需求如下：HTML结构如下(实际更加复杂)：

<div id="root">
    <div>
    ...
        <div class="need"> //我需要这个一层的所以 .need
            <div>
                <div>
                    <div>
                        <div class="need">
                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ...
    </div>
    
    <div>
    ...
        <div class="need"> //我需要这个一层的所以 .need
            <div>
                <div>
                    <div>
                        <div class="need">
                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ...
    </div>
    
    <div>
    ...
        <div class="need"> //我需要这个一层的所以 .need
            <div>
                <div>
                    <div>
                        <div class="need">
                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ...
    </div>
</div>

我如果用 jQuery 我可以用 $('#root').children('xxx').children('xxx')..children('.need'),
而用 find()，会把全部都找到。
不知道大家有没有不错的解决思路。先谢过了。

Answer 1

这个类的写法就有问题，不同层次类名一样？这样不是自己给自己找麻烦吗？使用jquery的话可以使用>，$("#root>.need")获取第一个。不过还是改下类名更好。

Answer 2

$('#root').find('.need:first')

Answer 3

jquery的dom选择可以跟css选择器一样写,例如需要最里面的class="need"的div $("#root .need .need");不需要跟楼主添加children()，只需跟class选择器一样的写法就可以了