隐藏具有特定类的第一个div [英] Hide the first div with specific class

问题描述

我要隐藏（显示：无）第一个div类别.leftAddress

I want to hide (display:none) the first div with class .leftAddress

这里是css

fieldset .leftAddress:first-of-type{
    display:none;
}

这里是html

<fieldset>
    <div class="alert forward"><span class="coming"><strong>NOTE:</strong></span> A maximum of 5 address book entries allowed.</div>
    <div class="leftAddress">Any</div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Harry Testing</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Heba ElZany</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen Shahin&nbsp;(primary address)</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen2 Shahin2</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen3 Shahin3</h3>
    </div>
</fieldset>

正如你看到的，我使用：first-of-type ，但似乎不工作。我在这里缺少什么？
我也试过：nth-​​of-type（1） http://jsfiddle.net/arns7/ 4 / 它不工作。
所以这个解决方案没有为我工作第一个元素的CSS选择器类

As you see I used :first-of-type, but it seems to be not working. What am I missing here? I also tried :nth-of-type(1) http://jsfiddle.net/arns7/4/ it doesn't work. So this solution didn't work for me CSS selector for first element with class

推荐答案

基于CSS的解决方案：

对于CSS，就我所知，没有直接的方法这样做。但是，您可以将以下作为解决方案。

CSS Based Solution:

With CSS, there is no direct way to do this as far as I am aware. However, you can do the below as a work-around solution.

fieldset .leftAddress {
    display:none;
}
fieldset .leftAddress ~ .leftAddress {
    display: block;
}

说明：第一个规则设置显示为 .leftAddress 下的所有元素的 none 然后第二个为 .leftAddress 的所有元素设置显示为 c $ c>类也有同一个类的前面同级。因此，总共有 .leftAddress 类的第一个元素保持隐藏。

Explanation: The first rule sets the display as none for all elements with .leftAddress class under the fieldset and then the second one sets display to block for all elements with .leftAddress class which also has a preceeding sibling with the same class. Thus in total, the first element with class as .leftAddress remains hidden.

CSS解决方案演示

注意： / strong>正如 xec 在评论中指出的，CSS解决方案仅在同义元素上使用时才有效。如果它们不是，并且在字段集中的一个包装器（另一个级别）中有一个元素 class ='leftAddress'，第一个。在字段集中的第一个 .leftAddress 将会被隐藏（如此处）。

Note: As pointed out by xec in comments, the CSS solution works only when used on elements which are siblings. If they are not and say there is one element with class='leftAddress' inside a wrapper (another level) within the fieldset, both the first .leftAddress in the fieldset and the first .leftAddress within the wrapper in the fieldset will get hidden (like here).

因此，实质上会在同一父项中隐藏该类的第一个元素。

So, in essence it hides the first element with that class within the same parent.

如果您没有遇到任何问题使用Javascript实现这个效果，你可以使用下面的代码。此解决方案没有基于CSS的解决方案中提及的限制（示例可以在此处查看）。

If you don't have any problems with using Javascript to achieve this effect, you can do it using the below code. This solution doesn't have the limitation mentioned in the CSS based solution (sample can be seen here).

window.onload = function(){
    document.getElementsByClassName('leftAddress')[0].style.display = 'none';
}

1. document.getElementsByClassName（'leftAddress'）[0] - 获取类名为 leftAddress 的DOM中的第一个元素。 [0] 是必需的，因为 getElementsByClassName 返回节点列表

1. document.getElementsByClassName('leftAddress')[0] - Gets the first element in the DOM with class name as leftAddress. The [0] is mandatory because getElementsByClassName returns a list of nodes (as the plural name suggests) and hence we have to reference it like we do with any array.

style.display ='none' - Javascript等效于CSS display：none 。

style.display = 'none' - Javascript equivalent of the CSS display: none.

JS解决方案演示

注意：如第1点所述，这当前会在整个文档中隐藏该类的第一个元素。如果你想限制它在 fieldset 中的那个类的第一个元素，也可以这样做。

Note: As mentioned in Point 1, this currently hides the first element with that class within the entire document. If you want to restrict it to the first element with that class within the fieldset, that can also be done.

这篇关于隐藏具有特定类的第一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！