Javascript 使用jquery隐藏重复的div

是否可以使用jQuery隐藏重复类-

class=“swatch attribute size”

，以及

class=“swatch attribute color”

？因此，只有前2个将可见，其余将隐藏。有人能帮忙吗

---

classname

swatch-opt-115

中的

115

将是动态的。样例属性颜色、样例属性大小可能会更改，但它们肯定会重复。计数也可能有所不同。因此，我们需要找出第一个子类的类名，然后找到重复类，并将其隐藏。

更新答案

如果只有2个

div

元素被重复：

• 使用与索引大于1的

  div

  元素匹配的查询

  :gt（1）

  在

  :child

  的

  .parent

  元素下
• 使用

  .hide（）

  方法

$（'.parent>div:first child>div:gt（1）'）.hide（）
.swatch-attribute.size{
背景：#美国联邦航空局；
}
.swatch-attribute.color{
背景：#aaf；
}

1号
颜色1
2号
颜色2
3号
颜色3
更新答案

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


使用与索引大于1的
div
元素匹配的查询
:gt（1）
在
:child
的
.parent
元素下
使用
.hide（）
方法


$（'.parent>div:first child>div:gt（1）'）.hide（）
.swatch-attribute.size{
背景：#美国联邦航空局；
}
.swatch-attribute.color{
背景：#aaf；
}

1号
颜色1
2号
颜色2
3号
颜色3

但还不能确定类名是否总是相同的。我们知道的是，它们总是会重复出现

这应该对你有用

<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>


var tempObj={}；
$（“.parent>div>div”）。每个（函数（）{
var classes=$（this.attr（'class'）.split（''）.join（'.'）；
//console.log（类）；
tempObj[classes]=“”；
});
//console.log（tempObj）；
for（在tempObj中输入var键）{
$（'.+key+'：gt（0'）.hide（）；
};

1号
颜色1
2号
颜色2
3号
颜色3

但还不能确定类名是否总是相同的。我们知道的是，它们总是会重复出现

这应该对你有用

<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>


var tempObj={}；
$（“.parent>div>div”）。每个（函数（）{
var classes=$（this.attr（'class'）.split（''）.join（'.'）；
//console.log（类）；
tempObj[classes]=“”；
});
//console.log（tempObj）；
for（在tempObj中输入var键）{
$（'.+key+'：gt（0'）.hide（）；
};

1号
颜色1
2号
颜色2
3号
颜色3
您可以使用核心JavaScript概念

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();  
};

您可以使用核心JavaScript概念

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-first\u-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；
如果（第一类计数>1）{
$（“+first_class+”：not（：first child）”）.hide（）；
}
如果（第二类计数>1）{
$（“+second_class+”：not（：nth child（2））”）.hide（）；
}

1号
颜色1
2号
颜色2
3号
颜色3
希望这能奏效：）
var-first\u-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；
如果（第一类计数>1）{
$（“+first_class+”：not（：first child）”）.hide（）；
}
如果（第二类计数>1）{
$（“+second_class+”：not（：nth child（2））”）.hide（）；
}

1号
颜色1
2号
颜色2
3号
颜色3
是的，您可以通过选择这些类来添加.hide（）方法。因此，只有您提到的两个类会被重复，这是固定的吗？我的意思是它们不是静态的，只是父类是静态的。所以它会像父类的第一个子类一样，然后重复将几个伪类隐藏到CSS中。您的标记是无效的。您需要
和
标记的数量相等。是的，您可以通过选择这些类来添加.hide（）方法。因此，只有您提到的两个类会重复是固定的吗？我的意思是它们不是静态的，只是父类是静态的。所以它会像父类的第一个子类一样，然后重复将几个伪类隐藏到CSS中。您的标记是无效的。您需要
和
标记的数量相等。谢谢。但是还不能确定它总是大小、颜色，它可以是任何东西，所以逻辑需要在重复的元素上。@LAW总是只有2个重复的元素吗？它将始终是
div
elements？父类将是类的名称。重复的元素将落在父类的第一个子类下。@LAW您是否像我一样正确地关闭了
div
元素？@LAW代码段正常工作