ループスルーと文字列を含む要素を非表示

Question

私の無知を謝罪します - 私はプログラミングがとても新しいです。

label要素をループし、テキストに特定の文字列が含まれている場合、親li要素を非表示にするスクリプトを作成しようとしています。

var labelclass = jQuery("li label"); 
 

 
for (i = 0; i < labelclass.length; i++) { 
 
    if ((labelclass).text().indexOf("Hide") >= 0) { 
 
    jQuery(this).closest("li").css("display", "none"); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><label>Show</label></li> 
 
    <li><label>Hide</label></li> 
 
    <li><label>Hide</label></li> 
 
    <li><label>Show</label></li> 
 
</ul>

私はオフに私はここにどこまで知りませんが、私はおそらく誤使用thisをすることができると思い：以下の私のコードを参照してください。ループも正しくない可能性があります。誰もが洞察力を提供して、これで次にどこに行くのか知ってもらえますか？あなたのお時間をありがとうございました。

Answer 1

ここでループは必要ありません。:containsセレクタをparent()とすると、liとなり、次にhide()となります。これで警告があまりにも隠されてしまう「隠さない」ので:containsは、コンテンツの任意の部分と一致するということです

$("li label:contains('Hide')").parent().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><label>Show</label></li> 
 
    <li><label>Hide</label></li> 
 
    <li><label>Hide</label></li> 
 
    <li><label>Show</label></li> 
 
</ul>

：これを試してみてください。あなたの代わりに使用することができます正確に一致filter()取得するには：うわー

$("li label").filter(function() { 
 
    return $(this).text().trim() == 'Hide'; 
 
}).parent().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><label>Show</label></li> 
 
    <li><label>Hide</label></li> 
 
    <li><label>Do Not Hide</label></li> 
 
    <li><label>Show</label></li> 
 
</ul>

Answer 2

あなたが:hasと:containsセレクタを組み合わせることによって、それを行うことができ、

jQuery("li:has(label:contains('Hide'))").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li><label>Show</label></li> 
 
<li><label>Hide</label></li> 
 
<li><label>Hide</label></li> 
 
<li><label>Show</label></li>