使用Javascript和/或JQuery，如何找到基于类的子元素

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

本文关键字：于类 元素 何找 Javascript JQuery 使用      更新时间：2023-09-26

我无法修改此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>

select标记包含class="attenting"，这对于这个特定的页面是唯一的，所以我使用它来访问这部分代码。最后，我试图访问class="ui-icon-arrow-r"的最后一个span标记，这样我就可以对它进行样式设置

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

它不起作用。当我删除find（）部分时，它会选择页面上的所有li元素。所以，我知道这部分正在发挥作用。但发现部分不是，我不明白为什么不。如何选择此元素？

试试这个：

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

以下是我的操作方法：

  1. 在你的li中添加一个类（.my li）（因为我们想要一个基于类的选择器，而不是基于标记的选择器）

  2. 使用jquery parents方法：

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

是的，这是你的案子解决了：http://jsfiddle.net/Xfj5U/

更新：

对不起，我搞砸了，你不能修改html-我的坏：（

您仍然可以使用这样的parents方法（带有标记选择器，不修改html）：

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

http://jsfiddle.net/ETpVL/

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

$(".attending").parent().parent().find('span:last-child').css( ... )
相关文章：