循环并隐藏包含字符串的元素

Question

我为自己的无知道歉 - 我对编程很新.

我正在尝试创建一个循环遍历label元素的脚本,然后li在label文本包含特定字符串时隐藏父元素.请参阅下面的代码:

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()就可以了.试试这个:

$("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>

需要注意的是,它:contains会匹配内容的任何部分,因此"隐藏"也会被隐藏.要获得完全匹配,您可以使用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>