Как искать глубокие вложенные элементы, не просматривая вложенные копии верхнего элемента?

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 содержит ссылку, которая соответствует определенному ключу, то есть "#some4"...

Кажется, я не могу найти лучший способ их итеративного итеративного обхода независимо от того, какой из 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

Решение @Sushanth хорошо, вы также можете использовать :has селектор

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

Answer 2

Почему бы вам не использовать селектор напрямую и не получить его ближайший родительский UL

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