如何使用JavaScript來隱藏基於文本的元素？

Question

我是一名初學者開發者。我試圖隱藏一個由第三方JavaScript動態添加到頁面的div，以達到審美目的。

問題是div沒有id屬性;這甚至有可能嗎？ div是否具有基於它們加載順序的任何固有屬性？或者有什麼方法可以搜索一串文本並隱藏該元素？

例如，根據文本happy New year刪除<div>happy New year</div>。

Answer 1

您可以先選擇相關的元素並遍歷它們直到找到想要的。

jQuery中這是可以做到這樣的：

// select relevant elements 
var elements = $('div'); 

// go through the elements and find the one with the value 
elements.each(function(index, domElement) { 
    var $element = $(domElement); 

    // does the element have the text we're looking for? 
    if ($element.text() === "happy New year") { 
     $element.hide(); 
      // hide the element with jQuery 
     return false; 
      // jump out of the each 
    } 
}); 

注意，代碼是有點脆，完全依賴於元素的內容。以下是相關的JQuery的API文檔：

• Selectors in jQuery（$(...)）
• jQuery.each() - 通過jQuery的打算對象數組
• jQuery.text() - 對所獲得的價值（也有在瀏覽器之間小，但noticable差異你如何在普通的JavaScript做到這一點）
• jQuery.hide() - 用CSS樣式隱藏元素display: none

請注意，您可以更具體與您的選擇說你有下面的代碼：

<div class="message"> 
    <div>happy New year<div> 
</div> 

您可以選擇與元素：

var domElement = $('.message div')[0]; // hopefully it only happens once 

Answer 2

我想我會提供一個簡單的JavaScript替代方案中，這可以改善（相當多的），布爾值的特別是通過作爲字符串（這感覺可怕）：

function hideByText(text, opts) { 
    if (!text) { 
     return false; 
    } 
    else { 
     var defaults = { 
      // the element we look within, expects: 
      // 1: node reference, eg the result of: document.getElementsByTagName('div')[0] 
      // 2: an element's id, as a string, eg: 'test' 
      'within': document.body, 
      // the element type, eg 'div', 'span', 'p', defaults to *everything* 
      'elemType': '*', 
      // case-sensitivity, as a string: 
      // 'true' : is case sensitive, 'Some' will not match 'some', 
      // 'false' : is case insensitive, 'Some' will match 'some' 
      'sensitive': 'true', 
      // 'absolute' : 'some text' will not match 'some text.' 
      // 'partial' : 'some text' will match 'some text.' 
      'match': 'absolute', 
      // 'true' : removes white-space from beginning, and end, of the text, 
      // 'false' : does not remove white-space 
      'trim': 'true', 
      // the class to add to elements if a match is made, 
      // use CSS to hide, or style, the matched elements 
      'matchedClass': 'hasText' 
     }, 
      opts = opts || {}; 

     for (var setting in defaults) { 
      if (defaults.hasOwnProperty(setting)) { 
       opts[setting] = opts[setting] || defaults[setting]; 
      } 
     } 

     var within = opts.within.nodeType == 1 ? opts.within : document.getElementById(opts.within), 
      elems = within.getElementsByTagName(opts.elemType), 
      flags = opts.sensitive == 'true' ? 'i' : '', 
      needle = opts.trim == 'true' ? text.replace(/^(\s+) || (\s+)$/g, '') : text, 
      haystack, 
      reg = new RegExp(needle, flags); 

     if (opts.match == 'absolute') { 
      for (var i = 0, len = elems.length; i < len; i++) { 
       if ((elems[i].textContent || elems[i].innerText) == text) { 
        elems[i].className = opts.matchedClass; 
       } 
      } 
     } 
     else if (opts.match == 'partial') { 
      for (var i = 0, len = elems.length; i < len; i++) { 
       if ((elems[i].textContent || elems[i].innerText).match(reg)) { 
        elems[i].className = opts.matchedClass; 
       } 
      } 
     } 
    } 
} 

hideByText('some text', { 
    'match': 'partial', 
    'sensitive': 'true', 
    'elemType': 'p', 
    'matchedClass' : 'hasText' 
});​ 

JS Fiddle demo。

Answer 3

A previous answer將根據組合文本內容（see .text() behavior）隱藏節點。下面的測試案例可以說明這一點：

should stay: <div><em>happy New year</em></div><br> 
should stay: <div>happy New years</div><br> 
should stay: <div>happy New <em>year</em></div><br> 
should stay: <div>Something else entirely</div><br> 
should hide: <div>happy New year</div> 

如下所示：jsFiddle

根據你的情況的細節，更一般的行爲可能是你想要的，因爲它會忽略對後代的結構，只有匹配組合文本。但是，如果你需要隱藏明確包含文本的<div>，像下面這樣只會隱藏在測試用例的最後<div>：

var tx = 'happy New year'; 
$('div:contains(' + tx + ')').filter(function(){ 
    var $content = $(this).contents(); 
    return $content.length === 1 && 
     $content[0].nodeType === 3 && 
     $content.text() === tx; 
}).hide(); 

如下所示：jsFiddle

最初的選擇可以修改爲隱藏包含特定文本的任何內容。這種更通用的方法將隱藏在第一種情況下<em>元素，並在最後一種情況的<div>元素：

$(':contains(' + tx + ')').filter(// etc... 

你可能會考慮removing the element from the DOM，而不是隻隱藏它。

:contains() jQuery selector

.filter() jQuery method

.contents() jQuery method

nodeType Node property

.remove() jQuery method

Answer 4

您可以真正做到這一點使用一個線

$("div").text("happy New year").hide();