Question

我有一个包含类似项目的div

<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

我希望保留每个课程的第一项并删除其他课程

Answer 1

使用:not()选择器和:first选择器。

$('.KNet:not(:first),.Visa:not(:first)').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

更新1： 如果所有span元素只有一个类名，那么您可以使用filter()方法执行此类操作。

//$('.KNet:not(:first),.Visa:not(:first)').remove();

$('.multiSel span').filter(function() {
  return $(this).is(':not(.' + this.className + ':first)')
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

<小时/> 更新2： 或者更好的方法是使用将类名保存为属性的哈希映射对象。

var hasRef = {};

$('.multiSel span').each(function() {
  if (hasRef[this.className]) $(this).remove();
  else hasRef[this.className] = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

Answer 2

遍历项目和类......

var classes = [];
$(".multiSel").find("span").each(function(i){
  var curClass= $(this).attr("class");
  if(jQuery.inArray( curClass, classes )>-1){
    $(this).remove();
  }
  classes[i] = curClass;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
  <pre>
    <div class="multiSel">
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
      <span class="KNet" title="KNet">KNet</span>
      <span class="Visa" title="Visa">Visa</span>
    </div>
  </pre>
</code>

<强>更新抱歉没读完，你想要什么...... 现在它应该是你想要的......

使用所有类填充数组...然后查看inArray是否已存在..如果不存在（-1）则删除它...所以你只保留第一项

使用jquery删除除每个类之外的所有项

2 个答案: