Question

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

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

＆＃13;

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");
  }
}

＆＃13;

<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>

＆＃13;

我不知道我在这里有多远，但我想我可能会误用this。循环也可能不正确。任何人都可以提供任何见解，以便我知道下一步该怎么做？非常感谢你的时间。

Answer 1

您不需要在此处循环，只需将:contains选择器与parent()一起使用即可获得li，然后hide()。试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

需要注意的是，:contains会匹配内容的任何部分，因此不要隐藏＆＃39;也会被隐藏起来。要获得完全匹配，您可以使用filter()：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

2 个答案: