当存在重复的DIV时隐藏一个元素

Question

如果在现有的重复元素中隐藏一个元素。

<div class="example">Example</div>
<-- Lot of code here -->
<div class="example">Example</div> <!-- Hide this with CSS: display: none; -->

我想我需要一个脚本

Answer 1

如果您的结构与兄弟姐妹的元素一样，您可以使用general sibling selector：

.example ~ .example {
  color:red;
}

<div class="example">Example</div>
<p>More code between siblings</p>
<div class="example">Example</div> <!-- Hide this with CSS: display: none; -->

Answer 2

答案稍微复杂一点。以下解决方案将捕获文档中具有class属性的所有元素。它将计算具有指定类的每个元素的数量，并将隐藏每个元素与相同的类除之外的第一个元素。

var allElems = document.querySelectorAll('*'),
    elems = [],
    obj = {};
    
    Array.from(allElems).forEach(v => v.getAttribute('class') ? elems.push(v) : null);
    elems.forEach(v => !obj[v.getAttribute('class')] ? obj[v.getAttribute('class')] = 1 :     obj[v.getAttribute('class')]++);
    Object.keys(obj).forEach(function(v) {
      var elements = document.getElementsByClassName(v);
      if (obj[v] > 1) {
        Array.from(elements).forEach(v => v.hidden = true);
        elements[0].hidden = false;
      }
    });

<div class="example">Example</div>
<div class="example">Example</div>
<div class="example">Example</div>
<div class="example">Example</div>

<div class="another">Another</div>
<div class="another">Another</div>

<div class="Alone">Alone</div>

Answer 3

要使用类“example”隐藏所有div，除了该类的第一个div，你可以使用这个jQuery，

$('.example:gt(0)').css('display','none');

将具有类“example”的所有div显式设置为display:none;，索引大于0。