Question

我正在寻找一种方法来隐藏div中的每个元素（设置为display：none）（如果元素的高度为0）。

实施例。隐藏elem1和elem4

<div class="container">
    <ul id="elem1" style="height:0"> ... </ul>
    <ul id="elem2" style="height:50"> ... </ul>
    <ul id="elem3" style="height:40"> ... </ul>
    <ul id="elem4" style="height:0"> ... </ul>
    <ul id="elem5" style="height:60"> ... </ul>
</div>

请帮忙

Answer 1

尝试这个尺寸：

.container ul[style="height:0"] {
    display: none;
}

演示：http://jsfiddle.net/qwertynl/yBJEe/

无论:之后是否有空格：

，以下内容都有效

.container ul[style~="0"], .container ul[style="height:0"] {
    display: none;
}

演示：http://jsfiddle.net/qwertynl/yBJEe/3/

Answer 2

纯JS样本。用类标记您的元素。这将有效：

<div class="container">
    <ul class='yourClass' id="elem1" style="height:0">.1..</ul>
    <ul class='yourClass' id="elem2" style="height:50">.2..</ul>
    <ul class='yourClass' id="elem3" style="height:40">.3..</ul>
    <ul class='yourClass' id="elem4" style="height:0">.4..</ul>
    <ul class='yourClass' id="elem5" style="height:60">.5..</ul>
</div>

JS脚本：

(function hideElements() {

var the_elements = document.getElementsByClassName('yourClass');
for (var i = 0; i < the_elements.length; ++i) {
    var item = the_elements[i];

    if (item.style.height === '0px') {
        item.style.display = 'none';
    }
}
})();

请注意，检索的值为“0px”。 JSFiddle工作样本：http://jsfiddle.net/amontellano/EgHLt/5/

Answer 3

此CSS块有助于

.container ul {
    overflow: hidden;
}

Answer 4

你可以使用querySelectorAll()

这样做

var x = document.querySelectorAll("ul[id*='elem']"); //select all elements with an ID containing 'elem'
for (var i=0; i<x.length; i++) { //loop the element array and check if height == 0
    if (x[i].style.height == 0) x[i].style.display = "none"; //set display to none
}

如果高度为0，则javascript隐藏div中的每个元素

4 个答案: