Question

我的html看起来像这样：

<div class="row">Something</div>
<div class="row">Text</div>
<div class="row">Something</div>

我无法触及DOM，所以类总是“行”。

实际代码：

<div class="row">
<label class="ag label" for="firstname" opt-for="firstname-input" opt-char-limit="null">First Name</label>
<input class="ad"=""="" type="text" name="firstname" id="firstname" placeholder="">
</div>
<div class="row">
<label class="ag label" for="lastname" opt-for="lastname-input" opt-char-limit="null">HideThisField</label>
<input class="ad"=""="" type="text" name="lastname" id="lastname" placeholder="">
</div>
<div class="row">
<label class="ag label" for="email" opt-for="email-input" opt-char-limit="null">Email</label>
<input class="ad" required="" type="email" name="email" id="email" placeholder="">
</div>

我需要定位包含“Text”的div并将其设置为display：none。在Javascript。

此外，我将有多个“文本”来隐藏自己的行。

不知道从哪里开始，感谢您的帮助！

Answer 1

首先，您不能拥有多个具有相同ID的元素。

你应该使用一个类。

示例：

var elems = document.getElementsByClassName('row');
for (var i = 0; i < elems.length; ++i) 
  if (elems[i].innerHTML === 'Text') 
    elems[i].style.display = 'none';

<div class="row">Something</div>
<div class="row">Something</div>
<div class="row">Text</div>
<div class="row">Something</div>

Answer 2

包含多个ID的HTML无效。如果你真的无法改变DOM，那么你很难进入。

如果你不能，以下是你的一些选择：

使用jQuery.contains选择器检查文本内容：http://api.jquery.com/contains-selector/

如果做不到这一点，你必须使用选择器的组合，比如所有输入和这样的类，并向上导航到外部div等：jQuery有很多选择器：http://api.jquery.com/category/selectors/

Answer 3

您可以尝试：

var divs = document.querySelectorAll(".row");
    Array.from(divs, div => {
       if (div.textContent.indexOf("text") >= 0) {
        div.style.display = "none";
  }
});

此外，您还必须使用类行替换所有id行（因为您在页面上不能使用相同的id）。

最佳

如何选择和隐藏包含TEXT的类

3 个答案: