僅當元素內部包含特定文本時才隱藏元素，使用JavaScript

我的頁面上有這些元素：

<div id="123test"><p>test</p></div>
<div id="123test"><p>othertext</p></div>

我正在嘗試div使用 Java Script 洗掉其中是否包含“測驗”文本，但它似乎不起作用。

這是我的 JS：

var container = document.getElementById('123test');

if (container.textContent=='test') {

container.style.display="none";

};

var container = document.getElementById('123test');

if (container.textContent == 'test') {

  container.style.display = "none";

};

<div id="123test"><p>test</p></div>
<div id="123test"><p>othertext</p></div>

我也嘗試使用:contains選擇器方式，但結果是一樣的。容器的樣式根本沒有改變。我做錯了什么？還有另一種可能的方法嗎？這段代碼是我專案的簡化版本，但這兩個都不起作用。如果有人能幫助我解決這個問題，我將不勝感激。

uj5u.com熱心網友回復：

確保您的 HTML 看起來完全像這樣：

<div id="123test"><p>test</p></div>
<!-- no whitespace or line breaks before or after <p>test</p> -->

而不是這樣

<div id="123test">
  <p>test</p>
</div>

為避免此問題，請trim()致電container.textContent：

var container = document.getElementById('123test');

if (container.textContent.trim() == 'test') {

  container.style.display = "none";

};

<div id="123test">
  <p>test</p>
</div>
<div id="123test2">
  <p>othertext</p>
</div>

如果 div 內部包含“測驗”文本，我正在嘗試洗掉它，使用 Java 腳本 [...]

如果包含test的內容足夠，請改為檢查：includes('test')

var container = document.getElementById('123test');

if (container.textContent.includes('test')) {

  container.style.display = "none";

};

<div id="123test">
  <p>test123</p>
</div>
<div id="123test2">
  <p>othertext</p>
</div>

重要旁注：您不能擁有多個具有相同id.

旁注 2：:contains僅存在于 jQuery 中，而不存在于 CSS 中。

關于使用的旁注 3 innerText：這是我的第一種方法，但由于 Safari/MacOS 上的一些奇怪原因，它不會隱藏容器：

var container = document.getElementById('123test');

if (container.innerText == 'test') {

  container.style.display = "none";

};

console.log(container.innerText.length); // 6 (!) on Safari/MacOS

<div id="123test">
  <p>test</p>
</div>
<div id="123test2">
  <p>othertext</p>
</div>

uj5u.com熱心網友回復：

這是一個檢查任意 DOM 樹中包含字串的文本節點"test"然后通過設定隱藏它們的示例display: none;。

該函式hideTestNodes接受NodeList并主要使用nodeTypeand textContent。

const wrapper = document.getElementById('wrapper')

const hideTestNodes = (children) => {
  for (const child of children) {
    if (child.nodeType === 1) {
      // If the node is another Element, check its child nodes
      hideTestNodes(child.childNodes)
    }
 
    // If the node is a text node and the content includes 'test'
    // then hide the parent element containing the text node
    if (child.nodeType === 3 && /test/i.test(child.textContent)) {
      child.parentElement.style.display = 'none'
    }
  }
}

hideTestNodes(wrapper.childNodes)

<div id="wrapper">
  <div>
    <p>test</p>
  </div>
  <div>
    <p>some other text</p>
  </div>
  <div>
   <p>some deeply <span> nested test</span> text</p>
  </div>
  <div>
    <p>this <span>includes</span> test.</p>
  </div>
</div>

uj5u.com熱心網友回復：

如果您只想對一個特定的 div 執行此操作，那么它非常簡單：

注意：我添加了兩秒鐘讓您了解它是如何發生的。您可以洗掉計時器。

 let test1 = document.getElementById("test1");

  if (test1.innerHTML.includes("test")) {

    setTimeout(() => {

      test1.style.display = "none";
      
    }, 2000);
    
  }

<div id="container">
  <div id="test1"><p>test</p></div>
  <div id="test2"><p>othertext</p></div>
</div>

如果你想檢查所有的 div，它仍然很簡單，你只需array要從它們中創建一個然后用于forEach loop檢查該容器中的所有 div：

let divs = document.getElementById("container").children;

[...divs].forEach(div => {
  if (div.textContent.includes("test")) {

    setTimeout(() => {

      div.style.display = "none";

    }, 2000);

  }
});

<div id="container">
  <div id="test1"><p>test</p></div>
  <div id="test2"><p>othertext</p></div>
</div>

標籤：javascripthtml

上一篇：從API獲取產品詳細資訊時出錯

下一篇：html水平格式化兩個雙行文本