Question

我有以下代码：

<div id="MetricsParentModelList">
   <ul>
      <li class="cModel" style=""><a href="#">Hello</a></li>
      <li class="cModel" style=""><a href="#">Hello World</a></li>
      <li class="cModel" style=""><a href="#">Hello World 123</a></li>
   </ul>
</div>

我想通过比较锚标记的文本来向li添加活动类。我不能使用jQuery的包含，因为如果我想向“ Hello”添加活动类，那么活动类将被添加到所有li元素中。我已经使用了jQuery的过滤器，但是以某种方式无法正常工作。代码是：

$("#MetricsParentModelList li a").filter(function() {
    return $(this).text() === TextToCompare;
}).parent().addClass('active');

Answer 1

您可以使用jquery的.each函数。这样您的代码将更具可读性。

var TextToCompare = "Hello World 123";

$("#MetricsParentModelList li a").each(function() {
    if($(this).text() === TextToCompare) {
        $(this).parent().addClass('active');
    }
});

.active { background-color: #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MetricsParentModelList">
   <ul>
      <li class="cModel" style=""><a href="#">Hello</a></li>
      <li class="cModel" style=""><a href="#">Hello World</a></li>
      <li class="cModel" style=""><a href="#">Hello World 123</a></li>
   </ul>
</div>

Answer 2

最有可能需要将JS包裹在$(document).ready(function(){})或$(()=>{})中作为速记。

$(() => {
  $("#MetricsParentModelList li a").filter(function() {
      return $(this).text().toLowerCase() === "hello";
  }).parent().addClass('active');
});

.active{
 background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MetricsParentModelList">
   <ul>
      <li class="cModel" style=""><a href="#">Hello</a></li>
      <li class="cModel" style=""><a href="#">Hello World</a></li>
      <li class="cModel" style=""><a href="#">Hello World 123</a></li>
   </ul>
</div>

jQuery中精确的文本匹配

2 个答案: