使用Jquery为仅包含指定文本的html列表元素提供背景颜色

时间:2013-01-07 14:14:26

标签: javascript jquery

我有以下html脚本:

<ul>
<li class="container">
<div class="age">24</div>
<div class="married">no</div>
</li>

<li class="container">
<div class="age">27</div>
<div class="married">yes</div>
</li>

<li class="container">
<div class="age">56</div>
<div class="married"><!--empty--></div>
</li>

<li class="container">
<div class="age">34</div>
<div class="married">no</div>
</li>
</ul>

我希望只有li中包含no的{​​{1}}元素才能使用Jquery获得绿色背景。

我不明白为什么this code不起作用。我如何得到预期的结果?

5 个答案:

答案 0 :(得分:5)

试试这个:

$(".container .married").filter(function() {
    return $(this).text() == "no";
}).closest('.container').css('background-color', 'green');

Example fiddle

答案 1 :(得分:2)

试试这个:

$(function(){
  $(".married").each(function() {
    if ($(this).text() === 'no') {
      $(this).closest('li').addClass('highlight')
    }

  });   
});

和CSS类

.highlight {
   background: green;
}

最好随时随地使用javascript保持css

示例:http://jsbin.com/irubap/1/edit

答案 2 :(得分:2)

;之后您有错误的"green",但您仍然无法获得所需内容。

你也可以;

$(".married:contains(no)").parent().css(...)

答案 3 :(得分:1)

使用它:

$("li:contains('no')").css('background-color', 'green');

答案 4 :(得分:0)

var mar = $(".married").filter( function( index, element ) { 
  return $( element ).text().match( /no/g );
}).css( 'background-color', 'green' );