Question

我有三个具有相同类名的div，我想隐藏第一个和最后一个div。

我的代码：

<div class="clsname">div1</div>
<div class="clsname">div2</div>
<div class="clsname">div3</div>

现在我要隐藏 div1 和 div3 。实际上我想在浏览器中使用输出：

div2

我该怎么做？

为了澄清，我想要这样的事情:(这只会隐藏 div3 ）

div.clsname + div.clsname + div.clsname {display:none;}

Answer 1

您可以通过以下

来实现这一目标

var elements = jQuery(".clsname");
for (var i = 0 ; < elements.length; i++) {
     if( i == 0 || i = elements.length -1) {
           jQuery(element[i]).style("display" : "none");
     }

}

这将隐藏具有特定类的第一个和最后一个元素。

Answer 2

使用这个简单的CSS：

div.clsname:first-child, div.clsname:last-child{
    display:none;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/aLaw2qj5/

Answer 3

lmgonzalves可以是一个有效的答案。但是你没有显示你所有的标记，所以Hashem Qolami是对的，它可能不是你想要的。

可能是一个更好的解决方案

.clsname, .clsname + .clsname + .clsname { display: none;}
.clsname + .clsname { display: block;}

Answer 4

var m = [[1,23,4],[4544,34,54],[6,7,68]]
for(i=1;i<2;i++) {
    for(j=0;j<2;j++) {
        console.log(m[i][j]);
    }
}

Answer 5

这是一个解决方案，只针对具有该类的三个div并且仅留下其他div。（所以无论是否有其他div，它都有效。）

div.clsname, div.clsname ~ div.clsname ~ div.clsname {display:none}
div.clsname ~ div.clsname {display:block}

<div>Other div, displayed normally</div>
<div class="clsname">div1</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div class="clsname">div2</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div class="clsname">div3</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>

兼容所有现代浏览器，甚至IE8。

如何隐藏三个相同元素中的第一个和最后一个元素

5 个答案: