使用Javascript和/或JQuery，如何根据类查找后代元素？

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?

Answer 1

尝试这个：

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

Answer 2

Here is how I would do it:

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

2. 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/

Answer 3

您需要使用parent()遍历两次：

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