javascript - 使用 jquery 删除除每个类中的一个之外的所有元素

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:或者更好的方法是使用将类名作为属性的 HashMap 对象。

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>