我想根据里面的文字隐藏div。在下面的例子中,我想隐藏“Handtekening”和“Thuis”的那些。我更喜欢用CSS做到这一点。这可能吗?
divs
的班级名称必须相同......
<div class="test">
Pakket
</div>
<div class="test">
Handtekening
</div>
<div class="test">
Thuis
</div>
如果CSS无法实现,如何使用JavaScript?
答案 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';
}
}
请记住将脚本包含在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";
}
});
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;
答案 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)
这是另一个解决方案:
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;
与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 functions和Array.from()
方法。如果需要与这些旧浏览器的兼容性,这里有一个替代实现,没有任何这样的新奇东西:
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;
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";
});
旁注:您可以使用类添加到捕获的元素,而不是插入内联样式。
答案 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)
您可以测试您的XPath here。
答案 10 :(得分:0)
如果你已经使用了jQuery,那么你也可以使用它 图书馆:contains(text)。
text:要查找的文字字符串。 区分大小写。
匹配文本可以直接出现在所选元素中,任何元素的后代中,或其组合中。与属性值选择器一样,括号内的文本:contains()可以写为单词或用引号括起来。文本必须具有匹配的案例才能被选中。
$( ".test:contains('Thuis'),.test:contains('Handtekening')" ).css( "display", "none" );
答案 11 :(得分:0)
您可以使用querySelector
获取元素,并使用element.classList.toggle
添加/删除将隐藏值的类。
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;