Question

我有以下代码

<div id="MetricsParentModelList">
   <ul>
      <li style=""><a href="#">Hello</a></li>
      <li style="display:none"><a href="#">Hello world</a></li>
      <li style="display:none"><a href="#">Hello world 123</a></li>
   </ul>
</div>

我想向显示不为空的那个li添加类“ active”。我还必须比较锚标记文本。

我的代码是：

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

Answer 1

您可以先使用:visible选择器选择可见的li，然后再使用TextToCompare过滤锚点，然后将类附加到锚点上，例如：

var TextToCompare = 'Hello';

$("#MetricsParentModelList li:visible").filter(function() {
     return $('a', this).text().trim() === TextToCompare;
}).addClass('active');

.active {
    background-color: lime;
}

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

Answer 2

当任务是基于某种条件向某些元素添加类时，我找不到使用filter()的任何理由。您可以使用each()遍历仅可见的li：

$("#MetricsParentModelList li:visible").each(function() {
    if ($(this).text().trim() === 'Hello')
      $(this).addClass('active');
});

.active{
  background-color: lime;
}

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

jQuery过滤器方法中的多个条件

2 个答案: