удалить все элементы, кроме одного из каждого класса с 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

цикл по элементам и классов ...

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>

UPDATE жаль не читает точно, что вы хотели. .. теперь он должен так что вы хотите ....

заполните массив со всеми классами ... затем посмотрите с inArray, если он уже существует .. если нет (-1), то удалите его ... так что вы просто сохранить первые позиции

Answer 2

Используйте :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>

---

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

---

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