Question

我想只使用条件

返回的值做一些事情

{{#each maindata-hold.[2].qa}}
    <div class="section">
        <a href="javascript:void(0)" class="person-link" id="{{id}}">
            <span class="name-role" id="{{id}}">
                {{name}} <br> {{role}}
            </span>
        </a>
    </div>
{{/each}}

所有我需要它来查看html的这一部分并获取其中一个包含值“QA Manager”的节点的值，我这样做

if ($('.person-link').text().toLowerCase().indexOf('qa m') > -1) {            
    $('.person-link').css('backgroundColor', 'black');
}

但是这种方式最后所有节点都有黑色背景，我需要黑色只有QA管理器的那个，有什么建议吗？

Answer 1

如何使用:contains()选择器

$('.person-link:contains("qa m")').css('background-color', 'red');

编辑（感谢skobaljik）：请注意，此方法区分大小写。要使其在上述情况下工作，您需要扩展jQuery this way。

Answer 2

使用filter是个不错的选择：

$('.person-link').filter(function(){
    return $(this).text().toLowerCase().indexOf('qa m') > -1;
}).css('backgroundColor', 'black');

＆＃13;

$('.person-link').filter(function(){
    return $(this).text().toLowerCase().indexOf('qa m') > -1;
}).css({'background': '#0095ff', 'color': '#fff'});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="person-link">Project Manager</div>
<div class="person-link">QA Manager</div>
<div class="person-link">Request Manager</div>

＆＃13;

Answer 3

你必须使用.css()

的辅助函数来完成它

＆＃13;

$('.person-link').css("backgroundColor", function(_,_css){
   return this.textContent.toLowerCase().indexOf('qa m') > -1 ? "black" : _css;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="person-link">Project Manager</div>
<div class="person-link" style="color:white">QA Manager</div>
<div class="person-link">Request Manager</div>

＆＃13;

Answer 4

我通常会这样做：

$(".person-link").each(function(){
  var $item = $(this);
  if ( $item.text().toLowerCase().indexOf('qa m') > -1){
    $item.css('backgroundColor', 'black');
  }
});

这样它会检查每个索引，如果匹配，则更改单个css，而不是所有匹配的类。

如何使用字符串indexOf返回的值？

4 个答案: