隐藏包含特定文本的div

时间:2017-10-17 13:03:57

标签: javascript html css

我想根据里面的文字隐藏div。在下面的例子中,我想隐藏“Handtekening”和“Thuis”的那些。我更喜欢用CSS做到这一点。这可能吗?

divs的班级名称必须相同......

<div class="test">
     Pakket
</div>
<div class="test">
     Handtekening
</div>
<div class="test">
     Thuis
</div>

如果CSS无法实现,如何使用JavaScript?

12 个答案:

答案 0 :(得分:8)

这是一个简单的vanilla Javascript解决方案:

let divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();

    if (content == 'Handtekening' || content == 'Thuis') {
        div.style.display = 'none';
    }
}

Working JSFiddle here

请记住将脚本包含在HTML页面的末尾(</body>标记之前)。

答案 1 :(得分:8)

如果您可以控制HTML输出并且文本文档的大小没有任何问题,则可以复制每个div的内容。否则JavaScript就是你要走的路。这是CSS解决方案:

<div class="test" content="Pakket">
Pakket
</div>
<div class="test" content="Handtekening">
Handtekening
</div>
<div class="test" content="Thuis">
Thuis
</div>

然后将选择器用于包含字符串的属性:

div[content~=Thuis] { display:none; }

上面的那个将匹配&#34; Thuis&#34;文本中包含单独的单词。如果要匹配任何字符串,请使用:

div[content*=and] { display:none; }

答案 2 :(得分:5)

不,纯CSS无法实现。您需要使用JavaScript来完成它。

这是您可以使用的代码:

var divs = document.querySelectorAll(".test");
Array.from(divs).forEach(function(div) {
  if (div.textContent.indexOf("Handtekening") >= 0 || div.textContent.indexOf("Thuis") >= 0) {
    div.style.display = "none";
  }
});

&#13;
&#13;
var divs = document.querySelectorAll(".test");
Array.from(divs).forEach(function(div) {
  if (div.textContent.indexOf("Handtekening") >= 0 || div.textContent.indexOf("Thuis") >= 0) {
    div.style.display = "none";
  }
});
&#13;
<div class="test">
  Pakket
</div>
<div class="test">
  Handtekening
</div>
<div class="test">
  Thuis
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:3)

您可以轻松地使用第二个class隐藏元素。

所以我们假设我们会添加class="hidden"

请参阅以下示例:

.test {
    color: blue;
}

.hidden {
    display: none;
    /* or visibility: hidden; */
}
<div class="test">
    Pakket
</div>
<div class="test hidden">
    Handtekening
</div>
<div class="test hidden">
    Thuis
</div>

通过添加第二个class,我们可以选择您要显示哪个<div>元素,哪个不显示。

答案 4 :(得分:3)

这是另一个解决方案:

&#13;
&#13;
Array.from( document.querySelectorAll('div.test') )
  .filter( node => /\b(Handtekening|Thuis)\b/i.test(node.textContent) )
  .forEach( node => node.style.display = 'none' );
&#13;
<div class="test">
     Pakket
</div>
<div class="test">
     HANDTEKENING
</div>
<div class="test">
     Test thuis blah blah
</div>
&#13;
&#13;
&#13;

chsdk's solution的主要区别在于我使用单个regexp test而非多个.indexOf()来电。 IMO更清洁,更灵活,也可能更高效。

正则表达式中的\b个锚点与单词边界匹配,因此例如"Thuis test"已匹配,但"Thuistest"未匹配。我怀疑这是OP想要的,但如果没有,\b锚可以很容易地删除和/或替换为其他东西。例如,正则表达式:

/^\s*(Handtekening|Thuis)\b/i

只有在单词“#34; Handtekening&#34;或&#34; Thuis&#34;发生在内容的开头(可能在一些空白之后)。用\b替换第二个\s*$也需要在匹配的单词之后没有任何内容(除了可能的空格)。

regexp文字末尾的i标志使匹配不区分大小写。如果不需要,可以简单地删除i。不过,我想把它包括在内作为说明目的。

聚苯乙烯。某些较旧的浏览器(例如,特别是Internet Explorer)可能不支持上述代码中使用的ES6 arrow functionsArray.from()方法。如果需要与这些旧浏览器的兼容性,这里有一个替代实现,没有任何这样的新奇东西:

&#13;
&#13;
var nodes = document.querySelectorAll('div.test');
for (var i = 0; i < nodes.length; i++) {
    if ( /\b(Handtekening|Thuis)\b/i.test(nodes[i].textContent) ) {
        nodes[i].style.display = 'none';
    }
}
&#13;
<div class="test">
     Pakket
</div>
<div class="test">
     HANDTEKENING
</div>
<div class="test">
     Test thuis blah blah
</div>
&#13;
&#13;
&#13;

AFAICT,这应该与IE兼容到版本9,当然还有所有现代浏览器。

答案 5 :(得分:2)

要根据文本选择元素,您可以使用js并检查文本是否等于要隐藏的文本。如果是,您可以将显示属性设置为none以隐藏该元素。

[...document.querySelectorAll('.test')].forEach(function(e) {
  if (['Handtekening', 'Thuis'].includes(e.textContent.trim())) {
    e.style.display = 'none'
  }
})
<div class="test">
  Pakket
</div>
<div class="test">
  Handtekening
</div>
<div class="test">
  Thuis
</div>

答案 6 :(得分:1)

你可以这样做,

let filteredOut = ['Handtekening', 'Thuis'];

Array.from(document.querySelectorAll(".test")).forEach((elm) => {
 if(filteredOut.includes(elm.textContent.trim())) elm.style.display = "none";
});

DEMO

  • 在单独的数组中收集需要过滤的值。
  • 迭代所有元素并检查其值在过滤器数组中的显示。
  • 如果存在,只需隐藏它。

旁注:您可以使用类添加到捕获的元素,而不是插入内联样式。

答案 7 :(得分:1)

您可以使用JavaScript:

var elements = document.getElementsByClassName('test');

for(var i = 0; i<elements.length; i++){

 if(elements[i].innerText==='Handtekening' || elements[i].innerText==='Thuis'){
  elements[i].style.display = 'none';
 }

}
<div class="test">
Pakket
</div>
<div class="test">
Handtekening
</div>
<div class="test">
Thuis
</div>

答案 8 :(得分:1)

以下是纯JavaScript解决方案:

// Define your variables
var objectsToCheck = document.getElementsByClassName("test");
var hideText = "Pakket";

// Loop through your div objects
[].forEach.call(objectsToCheck, function (o) {

  // Check if text appears in div under class "test"
  if(o.innerText.toLowerCase() == hideText.toLowerCase()){
      o.style.display = "none";
  }
});

答案 9 :(得分:0)

  • 使用CSS 3:
  • 使用JavaScript:
  • 使用XPath:(类似于// div [contains(text(),'Handtekening')] /。)

您可以测试您的XPath here

答案 10 :(得分:0)

如果你已经使用了jQuery,那么你也可以使用它 图书馆:contains(text)

  

text:要查找的文字字符串。 区分大小写

     

匹配文本可以直接出现在所选元素中,任何元素的后代中,或其组合中。与属性值选择器一样,括号内的文本:contains()可以写为单词或用引号括起来。文本必须具有匹配的案例才能被选中。

$( ".test:contains('Thuis'),.test:contains('Handtekening')" ).css( "display", "none" );

https://codepen.io/gc-nomade/pen/zEMbLz

答案 11 :(得分:0)

您可以使用querySelector获取元素,并使用element.classList.toggle添加/删除将隐藏值的类。

&#13;
&#13;
document.querySelector('#btn').addEventListener('click', function(){
  var text = document.querySelector('#txt').value.trim();
  
  var list = document.querySelectorAll('.test');
  for(var i = 0; i< list.length; i++) {
    list[i].classList.toggle('hide', list[i].textContent.trim() === text);
  }
})
&#13;
.hide {
  display: none;
}
&#13;
<div class="test">
Pakket
</div>
<div class="test">
Handtekening
</div>
<div class="test">
Thuis
</div>

<input type='text' id='txt' />
<button id='btn'>Hide Div</button>
&#13;
&#13;
&#13;