只显示一个类的第一个外观

Question

我有以下HTML结构，此类post-4837和post-4836正在重复。我必须只显示第一个并隐藏重复的那些：

<li class="product">
 <div class="some-other-class-names   post-4837">....</div>
</li>

<li class="product">
 <div class="some-other-class-names   post-4837">....</div>
</li>

<li class="product">
 <div class="some-other-class-names   post-4836">....</div>
</li>

<li class="product">
 <div class="some-other-class-names   post-4836">....</div>
</li>
<li class="product">
 <div class="some-other-class-names   post-4836">....</div>
</li>

如何使用CSS或jQuery隐藏重复的产品类？

实际上，我想隐藏.product重复post-*的所有类.post-4836。这些类是动态生成的，因此我无法使用.post-4837和.post-*进行选择。我想选择tee。

Answer 1

您可以使用$("[class*='post-']")选择它们。然后你将不得不迭代它们，从类中获取数字，并检查你是否已经在列表中。如果您已经拥有它，请隐藏它。否则，将其添加到列表中。

var groups = [];

$("[class*='post-']").each(function() {
  var c = this.className.substring(this.className.indexOf("post-") + 5);

  if (groups.indexOf(c) > -1)
    $(this).parent().hide();
  else
    groups.push(c);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="product">
  <div class="some-other-class-names post-4837">..1..</div>
</li>

<li class="product">
  <div class="some-other-class-names post-4837">..2..</div>
</li>

<li class="product">
  <div class="some-other-class-names post-4836">..a..</div>
</li>

<li class="product">
  <div class="some-other-class-names post-4836">..b..</div>
</li>
<li class="product">
  <div class="some-other-class-names post-4836">..c..</div>
</li>

注意：这假定post-*类始终是class属性中的最后一个。如果不能保证，你将不得不改变这一行：

var c = this.className.substring(this.className.indexOf("post-") + 5);

类似于：

var c = this.className.match(/post-\d+/)[0];
c = c.substring(c.indexOf("post-") + 5);

Answer 2

由于具有类post-XXX的元素是嵌套的，不是兄弟，因此无法使用CSS。这是一个JQuery解决方案，我遍历所有产品并使用数组来存储ID，我删除了重复的（如果它们已经存在于数组中）：

//empty array
var id=[];

$('.product > div').each(function() {
  //get all the classes
  var classes=$(this).attr('class').split(/\s+/);
  //loop all the classes
  for(var j=0;j<classes.length;j++) {
    //if the class match post-XXX
    if(classes[j].match(/post-(\d+)/)) {
      //get the ID
      var i=classes[j].split('-')[1];
      //test if ID exist
      if(id.indexOf(i)==-1) {
        //add it to array
        id.push(i);
      } else {
        //remove parent element (product)
        $(this).parent().hide();
      }
      break;
    }  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="product">
 <div class="some-other-class-names   post-4837">A1</div>
</li>

<li class="product">
 <div class="some-other-class-names   post-4837">A2</div>
</li>

<li class="product">
 <div class="some-other-class-names   post-4836">B1</div>
</li>

<li class="product">
 <div class="some-other-class-names   post-4836">B2</div>
</li>
<li class="product">
 <div class="some-other-class-names   post-4836">B3</div>
</li>

Answer 3

在ul内循环并获得最后class分割并在数组中推送一个唯一的数字。然后将所有不是eq的数字隐藏到0.在代码片段上运行演示。

var arrId = [];
$('ul li div').each(function(index, element) {
  var getclass = $(this).attr('class').split(' ').pop().split('-')[1];
  var stats = $.inArray(getclass, arrId);
  if (stats == -1) {
    arrId.push(getclass);
  }
});
$(arrId).each(function(index, element) {
var cls='div.post-' + element;
$(cls).not(':eq(0)').hide();
});

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="product">
    <div class="some-other-class-names   post-4837">....0</div>
  </li>

  <li class="product">
    <div class="some-other-class-names   post-4837">....1</div>
  </li>

  <li class="product">
    <div class="some-other-class-names   post-4836">....2</div>
  </li>

  <li class="product">
    <div class="some-other-class-names   post-4836">....3</div>
  </li>
  <li class="product">
    <div class="some-other-class-names   post-4836">....4</div>
  </li>
</ul>

Answer 4

尝试使用：first-of-type

.post-4837{
   display: none;
}

.post-4837:first-of-type {
   display: block;
}

OR

.post-4837 + .post-4837 {
   display: none;
}

Answer 5

您可以使用 jQuery的 first() 方法来实现：

$(".product:has(.post-4837)").first().css('display','block');
$(".product:has(.post-4836)").first().css('display','block');

.product {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="product">
  <div class="some-other-class-names   post-4837">..1st 4837..</div>
</li>
<li class="product">
  <div class="some-other-class-names   post-4837">....</div>
</li>
<li class="product">
  <div class="some-other-class-names   post-4836">..1st 4836..</div>
</li>
<li class="product">
  <div class="some-other-class-names   post-4836">....</div>
</li>
<li class="product">
  <div class="some-other-class-names   post-4836">....</div>
</li>

Answer 6

有一种纯香草溶液，没有使用post-[number] 我收集了所有课程，然后我用＆＃39;过滤 - ＆＃39;，然后我只显示第一个类型。

＆＃13;

＆＃13;

var allClasses = [];

var allElements = document.querySelectorAll("*");

for (var i = 0; i < allElements.length; i++) {
  var classes = allElements[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var cls = classes[j];
    if (cls && allClasses.indexOf(cls) === -1)
      allClasses.push(cls);
  }
}
allClasses.forEach(function(el) {
  if (el.substring(0, 5) == "post-") {
    console.log(document.getElementsByClassName(el)[0]);
    document.getElementsByClassName(el)[0].parentNode.style.display = 'block';
  }
});

＆＃13;

.product {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="product">
  <div class="some-other-class-names   post-4837">post-4837  1</div>
</li>

<li class="product">
  <div class="some-other-class-names   post-4837">post-4837  2</div>
</li>

<li class="product">
  <div class="some-other-class-names   post-4836"> post-4836  1</div>
</li>

<li class="product">
  <div class="some-other-class-names   post-4836">post-4836  2</div>
</li>
<li class="product">
  <div class="some-other-class-names   post-4836">post-4836  3</div>
</li>

＆＃13;

＆＃13;

＆＃13;