如何在不通过顶部元素的嵌套副本的情况下搜索深层嵌套元素？答案

【问题标题】：How to search deep nested elements without going through nested copies of top element?如何在不通过顶部元素的嵌套副本的情况下搜索深层嵌套元素？
【发布时间】：2014-06-11 07:25:27
【问题描述】：

例如，我在一个页面上有 4 个无序列表：

<div class="UL-GROUP">
    <div>
        <ul class="UL">
            <li><a href="#something1"></a></li>
            <li><a href="#something2"></a></li>
            <li><a href="#something2"></a></li>
            <li><a href="#something3"></a>
                <div class="UL-GROUP">
                    <div>
                        <ul class="UL">
                            <li><a href="#something4"></a></li>
                            <li><a href="#something5"></a></li>
                            <li><a href="#something6"></a></li>
                            <li><a href="#something7"></a>
                                <div class="UL-GROUP">
                                    <div>
                                        <ul class="UL">
                                            <li><a href="#something8"></a></li>
                                            <li><a href="#something9"></a></li>
                                            <li><a href="#something10"></a></li>
                                            <li><a href="#something11"></a></li>
                                        </ul>
                                        <div class="contents">Loads of elements in here</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="contents">Loads of elements in here</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="contents">Loads of elements in here</div>
    </div>
</div>
<div class="UL-GROUP">
    <div>
        <ul class="UL">
            <li><a href="#something12"></a></li>
            <li><a href="#something13"></a></li>
            <li><a href="#something14"></a></li>
            <li><a href="#something15"></a></li>
        </ul>
        <div class="contents">Loads of elements in here</div>
    </div>
</div>

我需要遍历所有这些，然后跟踪 4 个 UL 中的哪一个包含与特定键匹配的链接，即“#something4”...

我似乎无法找出独立有效地迭代这些内容的最佳方法，同时跟踪哪个 UL 包含匹配的键值。至少在没有使用 .children 的一些非常丑陋的链接的情况下（参见下面的 jQuery 代码）。那么我应该如何考虑性能呢？

注意：嵌套层级和 HTML 结构将保持不变，但这不是针对像导航元素这样简单的东西，内容将作为 .UL 元素的兄弟元素混入其中，我也在尝试这样做避免

JS：

console.log($('.UL-GROUP').children('div').children('.UL').find('a[href*="#something4"]'))

编辑澄清：我想简化这一点，但使用下面的代码我变得卡住/不确定我将如何跟踪哪个 .UL-GROUP 具有我正在寻找的密钥（即使用 .data）：

$('.UL-GROUP > div > ul > li').length

【问题讨论】：

标签： jquery performance jquery-traversing

【解决方案1】：

你为什么不直接使用选择器并获得它最接近的父UL

$('a[href*="#something4"]').closest('ul');

【讨论】：

可能希望使用主父级限定第一个选择器，这样就不会尝试匹配目标区域之外的其他 URL。

【解决方案2】：

@Sushanth 的解决方案不错，也可以使用:has 选择器

$('.UL-GROUP:has( > div > ul > li > a[href*="#something4"])').each(function(i, ul) {
    console.log(ul);
});

【讨论】：

这对我很有用。更进一步，您是否可以在迭代 .UL-GROUP 元素的 .each() 循环中执行此操作？
@u353，我已经更新了答案以迭代所选元素。这就是你要找的吗？
不完全是（我需要在提出问题和寻找答案方面做得更好！）您所做的不仅仅是回答问题......但为了避免让这成为另一个“谢谢”评论，让我解释一下我现在正在尝试做你和 Sushanth 已经回答的问题：我已经有一个 .each 函数迭代页面上的所有 .UL-GROUPS（它对 UL-GROUPS 和后续元素分组进行了一些 dom 操作，即.UL & li & a's)。我正在尝试找到一种方法来使用这个已经存在的 .each 函数来实现与上述相同的功能，以减少代码并提高性能。