使用 jquery 隐藏重复的 div

Question

<div class = "parent">
<div class="swatch-opt-115">
       <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">

       </div>
    </div>
    </div>

是否可以使用 jQuery 隐藏重复的 classes - class="swatch-attribute size" 和 class="swatch-attribute color"？所以只有前 2 个是可见的，其余的将被隐藏。有人可以帮忙吗？

classname swatch-opt-115 中的 115 将是动态的。 swatch-attribute 颜色，swatch-attribute 尺寸可能会改变，但可以肯定它们会重复。计数也可能不同。所以我们需要找出第一个child的class名字，然后找到重复的class，然后隐藏它们。

Answer 1

更新答案

如果只有 2 个 div 元素重复：

使用与 .parent 元素的 :first-child 下索引大于 1 :gt(1) 的 div 元素相匹配的查询，
使用.hide()方法。

$('.parent > div:first-child > div:gt(1)').hide();

.swatch-attribute.size {
  background: #faa;
}
.swatch-attribute.color {
  background: #aaf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="swatch-opt-115">
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 1</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 1</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 2</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 2</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 3</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 3</div>
    </div>
  </div>
</div>

请注意，我还添加了结尾以使其正常工作。

希望对您有所帮助。

⋅ ⋅ ⋅

旧答案

这里有一个只显示第一个元素的解决方案：

对所有元素使用 .hide()，
在 .first() 个元素上使用 .show()，
另外，我添加了一些颜色和内容，使代码段更加直观。

片段：

$(".swatch-attribute.size").hide().first().show();
$(".swatch-attribute.color").hide().first().show();

.swatch-attribute.size {
  background: #faa;
}
.swatch-attribute.color {
  background: #aaf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="swatch-opt-115">
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 1</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 1</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 2</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 2</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 3</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 3</div>
    </div>
  </div>
</div>

请注意，我还添加了结尾 </div> 以使其正常工作。

希望对您有所帮助。

Answer 2

But It is not confirmed that the class names will always be the same. what is known is they will always be repeated.

这应该适合你

var tempObj = {};
$(".parent > div > div").each(function() {
    var classes = $(this).attr('class').split(' ').join('.');
  //console.log(classes);
  tempObj[classes] = "";
});
//console.log(tempObj);

for(var key in tempObj) {
  $('.' + key +':gt(0)').hide();  
};

var tempObj = {};
$(".parent > div > div").each(function() {
 var classes = $(this).attr('class').split(' ').join('.');
  //console.log(classes);
  tempObj[classes] = "";
});
//console.log(tempObj);

for(var key in tempObj) {
  $('.' + key +':gt(0)').hide();  
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="swatch-opt-115">
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 1</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 1</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 2</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 2</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 3</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 3</div>
    </div>
  </div>
</div>

Answer 3

您可以使用核心 JavaScript 概念

document.getElementById('YourID').style.display="none";

Answer 4

希望这有效:)

var first_class = $(".parent > div > div:nth-child(1)").attr("class").replace(" ", ".");
var second_class = $(".parent > div > div:nth-child(2)").attr("class").replace(" ", ".");

var first_class_count = $("."+first_class).length;
var second_class_count = $("."+second_class).length;

if(first_class_count > 1){
  $("."+first_class+":not(:first-child)").hide();
}

if(second_class_count > 1){
  $("."+second_class+":not(:nth-child(2))").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="swatch-opt-115">
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 1</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 1</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 2</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 2</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 3</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 3</div>
    </div>
  </div>
</div>

使用 jquery 隐藏重复的 div

Hide repeating divs using jquery

html

javascript

jquery

web-frontend