How to search deep nested elements without going through nested copies of top element?

Question

Example is I have a 4 unordered lists on a page:

<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>

And I need to iterate over all of them and then track which of the 4 UL's contains a link that matches a specific key, ie "#something4"...

I can't seem to figure out the best way to iterate over these independently and efficiently, while keeping track of which one of the UL's contains the matching key value. At least not without some very ugly chaining using .children (see jQuery code below). So how should I do this with performance in mind?

Note: The nested levels and HTML structure will remain constant, however this is not for something as simple as navigational elements, there will be content mixed in as siblings of the .UL elements which I'm trying also to avoid

JS:

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

Edit for clarification: I thought of simplifying this, but using the below code I become stuck/unsure as to how I'd track which .UL-GROUP has the key I'm looking for(i.e. with .data):

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

score 2 · Answer 1 · answered Jun 10 '14 at 22:44

2

Why don't you use the selector directly and get it's closest parent UL

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

answered Jun 10 '14 at 22:44

Sushanth --

55,259
9
66
105

1

Might want to qualify the first selector with a master parent so this doesn't try to match other URLs outside the target zone. – jfriend00 Jun 10 '14 at 23:09

Fabricator · Accepted Answer · 2014-06-10T23:25:27.110

1

@Sushanth's solution is good, you can also use the :has selector

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

edited Jun 10 '14 at 23:25

answered Jun 10 '14 at 22:55

Fabricator

12,722
2
27
40

This works great for me. Taking it one step further might you be able to do this from within a .each() loop that iterates over .UL-GROUP elements? – u353 Jun 10 '14 at 23:17
@u353, I've updated the answer to iterate over the selected elements. Is that what you are looking for? – Fabricator Jun 10 '14 at 23:25
Not exactly (I need to get better at asking questions and finding answers!) You have done more than answer the question... but to avoid making this another "thank you" comment let me explain what I am attempting to do now that you and Sushanth have answered it: I already have a .each function iterating over all of the .UL-GROUPS on the page (it does some dom manipulation on the UL-GROUPS and subsequent element groupings, i.e. .UL & li & a's). I'm trying to find a way to use this already existing .each function to achieve the same thing as above, to cut down on code & increase performance. – u353 Jun 10 '14 at 23:33

How to search deep nested elements without going through nested copies of top element?

2 Answers2