Question

示例是我在页面上有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中的哪一个包含与特定键匹配的链接，即＆＃34;＃something4＆＃34; ...

我似乎无法找到独立有效地迭代这些内容的最佳方法，同时跟踪哪一个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

Answer 1

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

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

Answer 2

@ Sushanth的解决方案很好，你也可以使用:has选择器

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

如何在不经过top元素的嵌套副本的情况下搜索深层嵌套元素？

2 个答案: