javascript - Jqueryを使用して、指定されたテキストのみを含むhtmlリスト要素に背景色を与える

Question

私は次の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>

Jqueryを使用して、にliを含む要素のみが緑色の背景を取得するようにしたいと思います。nodiv.married

このコードが機能しない理由がわかりません。意図した結果を得るにはどうすればよいですか？

Answer 1

これを試して：

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

フィドルの例

Answer 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

Answer 3

あなたはまだあなたが探しているものを手に入れられないでしょうが、あなたは間違っ;た後を持っています."green"

あなたもできます。

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

Answer 4

これを使って ：

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

Answer 5

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