使用特定锚点文本选择 li 标签

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>

我希望能够通过特定的锚文本将class active添加到

中。例如，我希望将class active添加到锚点文本为"4RUNNER"的

元素中。

我尝试了以下代码，但它不起作用：

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

- Waleed Naveed

---

你正在将类添加到锚点。 - epascarello

是的，我想将它添加到li中。@epascarello - Waleed Naveed

那你为什么选择锚点呢？ - epascarello

用于比较文本。实际上，我想将类添加到具有特定锚文本的li中。@epascarello - Waleed Naveed

那么为什么不在列表中使用contains呢？仍将具有相同的文本。 - epascarello

Answer 1

现在你正在向锚点本身添加类 active，你需要使用 jQuery 方法parent()来向上移动到父节点 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;
}

<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>

- Zakaria Acharki

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>

- Mamun

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>

- yajiv

Answer 4

你的代码将它添加到了锚点而不是列表项。你可以直接在列表项元素上使用 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，那么您需要使用 `...find(...).parent()` 或 `...find(...).closest('li')` 选择父级元素。

- epascarello