Using Javascript and/or JQuery, how to find descendant element based on class?

Question

I can't modify this HTML:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-rapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
    <div class="ui-btn-inner ui-li">
        <div class="ui-btn-text"> 
            <a class="make-inline ui-link-inherit" href="#"> 
                <h3 class="ui-li-heading"> Attending: 
                </h3> 
            </a> 

            <div class="ui-select">
                <a href="#" role="button" id="undefined-button" aria-haspopup="true" aria-owns="undefined-menu" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" data-inline="true" data-mini="false" class="ui-btn ui-btn-up-c ui-btn-inline ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-right ui-disabled" aria-disabled="true">
                    <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text"> Maybe </span>
                        <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
                    </span>
                </a>
                <select class="attending 310 mobile-selectmenu-disabled ui-state-disabled" data-inline="true" data-native-menu="false" tabindex="-1" disabled="disabled" aria-disabled="true">
                    <option value="2"> Yes </option>
                    <option value="0"> No </option>
                    <option value="1"> Maybe </option>
                </select>
            </div>
        </div>


        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>


    </div>
</li>

The select tag contains class="attending", which is unique to this particular page, so I'm using that to gain access to this part of the code. Eventually, I'm trying to access the last span tag with class="ui-icon-arrow-r", so I can style it. I've tried using jQuery like so:

$(".attending").parent().find(".ui-icon-arrow-r").css('background-color','yellow');

It doesn't work. When I remove the find() part, it selects all of the li elements on the page. So, I know that part is working. But the find part is not and I can't figure out why not. How to select this element?

jeff · Accepted Answer · 2012-08-26 20:58:58Z

5

Try this:

$(".attending").closest('div.ui-btn-inner').find(".ui-icon-arrow-r").css('background-color','yellow');

answered Aug 26, 2012 at 20:58

jeff

8,3582 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nnnnnn Over a year ago

@sungod000 - This works: jsfiddle.net/yFgnx (though with only a non-breaking space in the span there's not much yellow).

abc123 Over a year ago

THanks guys, but for some reason it doesn't work. In fact, I've tried a bunch of things, and they are not making sense. Maybe the DOM objects are arranged differently than the HTML? Not sure, but I'm getting unexpected results.

jfriend00 Over a year ago

@sungod000 - this is the right approach. If it's not working for you, then your page isn't actually like the HTML you have in your question or you have a script error that keeps this from executing. You need to either check the actual working DOM to verify it, check for script errors or post a link to the actual page so we can help troubleshoot.

abc123 Over a year ago

I'm new to this, but just did a bunch more testing and this works in the console. I've been told by a friend, I need to figure out when to tell the browser to execute this code. Something about event handlers and their sequence.

abc123 Over a year ago

Ok, got it. Need to add $(document).ready(function(){ //MyCodeHere }); so it would execute after the DOM was ready.

Nikita Hismatov · Accepted Answer · 2012-08-27 04:05:37Z

2

Here is how I would do it:

Add a class (.my-li) to your li (because we want a class-based selector, not tag-based one)

Use jquery parents method:

$(".attending").parents('.my-li').find(".ui-icon-arrow-r").css('background-color','yellow')

And yep - here is your case resolved: http://jsfiddle.net/Xfj5U/

Update:

Sorry, I messed that you can not modify html - my bad :(

You still can use parents method like this (with tag selector and not modifying html):

$(".attending").parents('li').find(".ui-icon-arrow-r").css('background-color','yellow')

http://jsfiddle.net/ETpVL/

edited Aug 27, 2012 at 4:05

answered Aug 26, 2012 at 21:04

Nikita Hismatov

1,6761 gold badge15 silver badges30 bronze badges

2 Comments

gray state is coming Over a year ago

The first sentence says I can't modify this HTML.

nnnnnn Over a year ago

Sorry, but this answer is wrong in every possible way. OP can't modify the html, so can't add a class. Plus you're setting the colour rather than the background colour, and you're setting it red not yellow, and you're setting the colour for the whole li element not just the specified span.

bperson · Accepted Answer · 2012-08-26 20:55:46Z

0

You need to traverse two times using parent() :

$(".attending").parent().parent().find('span:last-child').css( ... )

answered Aug 26, 2012 at 20:55

bperson

1,34510 silver badges19 bronze badges

2 Comments

abc123 Over a year ago

I just tried, and as suspected, didn't work. Traversing once, already brings me up to the li element, which is high enough. Shouldn't the find function work from that element?

nnnnnn Over a year ago

This doesn't work. You need parent().parent().parent() to get to the div containing the span with the ".ui-icon-arrow-r" class, but even then it won't work if you use 'span:last-child' rather than ".ui-icon-arrow-r" because it'll find all spans within that div that are the last child of their parent.

Collectives™ on Stack Overflow

Using Javascript and/or JQuery, how to find descendant element based on class?

3 Answers 3

5 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related