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

【问题标题】：Loop Through and Hide Elements Containing a String [duplicate]循环并隐藏包含字符串的元素
【发布时间】：2017-04-07 11:42:17
【问题描述】：

我为我的无知道歉 - 我对编程很陌生。

我正在尝试创建一个脚本，该脚本将遍历 label 元素，然后在 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。循环也可能不正确。有人可以提供任何见解，以便我知道下一步该去哪里吗？非常感谢您的宝贵时间。

【问题讨论】：

标签： javascript jquery html loops

【解决方案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>

【讨论】：

哇，你真快！谢谢你的回答。在我的脑海中，我记得听说过一些关于使用contains 的坏事，我认为那是卡住了。这比我意识到的要简单得多。我会在允许的时候勾选你的答案:)

【解决方案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>

【讨论】：

谢谢你。