CODEWITHSUNDEEP
jqueryjquery-selectorsfind
at7000ft
at7000ft

Reputation: 931

jquery selector to find a child element with

Have been googling and trial-and-erroring for an hour trying to come up with a jquery selector to access one of several label elements in an expandable tree. The html is either like this:

<span id="ppown" class="treeTitleSpan" role="leaf">PPO</span> 
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />

Or like this:

<span id="ppw" class="treeTitleSpan" role="leaf">Other</span> 
<span class="handle closed"></span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />

And I am starting from the .treeTitleSpan span in each case (in a click handler). I know I can access one with:

$(this).next().next().children('.nodeCheckIcon');

And the other with:

$(this).next().children('.nodeCheckIcon');

But I would like a single selector that will work for both cases, 'find' doesn't seem to work:

$(this).find('.nodeCheckIcon:first')

Any help would be appreciated.

rick

Upvotes: 4

Views: 10763

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Since this is pointing to the span element which is the sibling of the parent of label, $(this).find('.nodeCheckIcon:first') is not going to work. I dont know about your complete markup structure, but if you have a wrapping container for this span element then you can try this

$(this).parent().find('.nodeCheckIcon:first');

Upvotes: 0

Jules
Jules

Reputation: 1423

Alternative to the other posts (many ways to skin a cat :))

$(this).siblings(".treeCheckBoxLabel:has(label.nodeCheckIcon):first")

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

How about something like this:

$(this).nextAll('.treeCheckBoxLabel:first').children('.nodeCheckIcon');

Using :first ensures you'll only select one .treeCheckBoxLabel at most, which may or may not be an issue depending on the rest of your HTML.

Upvotes: 0

Paul
Paul

Reputation: 141827

$(this).nextAll('.treeCheckBoxLabel').children('.nodeCheckIcon');

Or if you might have more than one Label like:

<span id="ppw" class="treeTitleSpan" role="leaf">Other</span> 
<span class="handle closed"></span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />
</span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />
</span>

And you only want the first one:

$(this).nextAll('.treeCheckBoxLabel').first().children('.nodeCheckIcon');

Upvotes: 0

Related Questions