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隐藏重复类-class="swatch-attribute size"和class="swatch-attribute color"？因此，只有前2个可见，其余部分将被隐藏。有人可以帮忙吗？

类名115中的swatch-opt-115将是动态的。色板属性颜色，色板属性大小可能会更改，但可以确定它们会重复。计数也可能有所不同。因此，我们需要找出第一个孩子的班级名称，然后找到重复的班级并将其隐藏。

Answer 1

更新后的答案

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

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

.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()元素上使用.show()，
此外，我添加了一些颜色和内容以使代码段更加直观。

摘要：

.first()

$(".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>，以使其正常工作。

希望有帮助。

Answer 2

但是尚未确认类名将始终相同。已知它们将始终重复出现。

这应该为您工作

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

希望这行得通:)

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>

Answer 4

您可以使用核心JavaScript概念

def func(list):
    return int(list[0])

list_id = map(func, list_id)

list_id = list(map)
# This line is not required if you just want to iterate over the values.

使用jQuery隐藏重复的div

4 个答案: