Question

我编写了一个简单的javascript代码，以查找该字符串是否存在于所选元素的innerHtml中，现在我想隐藏包含该字符串的元素，但是我不确定如何获取标签ID或隐藏指定元素的内容。这是我的代码。

 function hideTemplateOption(collToHide, hideText) {
    let collection = document.getElementsByClassName("product_tr_cus");
    if(collectionContains(collection,"test")) {
        console.log("contains");
    } else {
        console.log("nope");
    }
  }
  function collectionContains(collection, searchText) {
    for (var i = 0; i < collection.length; i++) {
        if( collection[i].innerText.toLowerCase().indexOf(searchText) > -1 ) {
            return true;
        }
    }
    return false;
  }
  hideTemplateOption();

Answer 1

您可以执行collection[i].style.display = 'none';或更好地进行有条件的设置：

function toggle(collection, searchText) {
  var found = false;
  for (var i = 0; i < collection.length; i++) {
      var item_found = collection[i].innerText.toLowerCase().match(searchText);
      collection[i].style.display = item_found ? '' : 'none';
      if (item_found) {
          found = true;
      }
  }
  return found;
}

let collection = document.getElementsByClassName("product_tr_cus");
document.querySelector('input').addEventListener('keyup', function(event) {
   toggle(collection, event.target.value);
});

<input/>
<ul>
  <li class="product_tr_cus">Foo</li>
  <li class="product_tr_cus">Bar</li>
  <li class="product_tr_cus">Baz</li>
  <li class="product_tr_cus">Quux</li>
</ul>

如果想要相反的名称，它将隐藏具有字符串的节点，然后使用：

collection[i].style.display = item_found ? '' : 'none';

，您可能还需要为该函数起个更好的名字。

Javascript在选定元素中搜索字符串，并隐藏包含该字符串的html标签

1 个答案: