Question

我有以下代码：

<ul id="ulId">
    <div>
        <div>
             <li class="cModel" style=""><a href="#">4RUNNER</a></li>
             <li class="cModel" style=""><a href="#">86</a></li>
             <li class="cModel" style=""><a href="#">AVALON</a></li>
        </div>
   </div>
</ul>

我想使用特定锚文本向li添加活动类，例如，我要向锚标记文本为“ 4RUNNER”的li元素添加活动类。

我尝试了以下代码，但没有用：

$("#ulId li").find('a:contains(4RUNNER)').addClass('active')

Answer 1

现在，您要将类active添加到锚点本身，需要使用jQuery方法 parent() 转到父节点{{1 }}，然后添加类：

li

$("#ulId li").find('a:contains(4RUNNER)').parent().addClass('active');
//Or
// $("#ulId li").find('a:contains(4RUNNER)').closest('li').addClass('active');

.active {
  background-color: green;
}

Answer 2

由于当前选择器是锚点，因此您可以使用parent()定位父li来添加类：

$("#ulId li").find('a:contains(4RUNNER)').parent().addClass('active')

.active a{
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulId">
    <div>
        <div>
             <li class="cModel active" style=""><a href="#">4RUNNER</a></li>
             <li class="cModel" style=""><a href="#">86</a></li>
             <li class="cModel" style=""><a href="#">AVALON</a></li>
        </div>
   </div>
</ul>

Answer 3

使用jquery的 closest() 或 parents() 或 parent() 。

/*------------------closest()--------------------*/
$("#ulId li").find('a:contains(4RUNNER)').closest("li").addClass('active');

/*------------------parents()--------------------*/
$("#ulId li").find('a:contains(4RUNNER)').parents("li").addClass('active')

/*------------------parent()--------------------*/
$("#ulId li").find('a:contains(4RUNNER)').parent().addClass('active');

.active{
  background-color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulId">
    <div>
        <div>
             <li class="cModel" style=""><a href="#">4RUNNER</a></li>
             <li class="cModel" style=""><a href="#">86</a></li>
             <li class="cModel" style=""><a href="#">AVALON</a></li>
        </div>
   </div>
</ul>

Answer 4

您的代码将其添加到锚点而不是li。您只需在li元素上使用contains即可，因为它的文本与锚点相同。

$("#ulId li:contains(4RUNNER)").addClass('active')

.active {
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="ulId">
    <div>
        <div>
             <li class="cModel" style=""><a href="#">4RUNNER</a></li>
             <li class="cModel" style=""><a href="#">86</a></li>
             <li class="cModel" style=""><a href="#">AVALON</a></li>
        </div>
   </div>
</ul>

如果您确实要使用查找，则需要使用...find(...).parent()或...find(...).closest('li')选择父级。

选择带有特定锚标签文本的li标签

4 个答案: