Duplizierten Wert entfernen, der durch Elementdaten

Question

generiert wurde Ich habe eine Gruppe von Bildern, jedes Bild habe data-type="type,type", also um mein Leben einfacher zu machen, habe ich vor, den Dateityp zu greifen und sie zu einem Array zu machen jeder von ihnen in span) und an ein "category" -Element anhängen.

$('li.grid-item').each(function() { 
    // grab a reference to the current li 
    var $el = $(this); 
    // get the url from its data-class attribute 
    var arr = $el.find('img').data('type').split(','); 

    $.each(arr, function (index, value) { 
     $el.find('.category').append('<span>' + value + '</span>'); 
     $el.addClass(value); 
    }); 
}); 

<li class="grid-item"> 
    <figure> 
     <img src="img/sticker/still/sticker_30.png" alt="sticker" title="You know I'm good" data-type="others/" data-price="9 bahts" data-alt="img/sticker/ani/sticker_30.gif" /> 
    </figure> 
    <a href="#"> 
     <span class="download ala_carte">CONTINUE</span> 
    </a> 
    <div class="category"></div> 
</li> 

Es funktionieren aber 20 jeder Wert dupliziert, bitte helfen Sie. Wie entfernt man diesen doppelten Array-Wert? Bitte helfen Sie, danke im Voraus.

Answer 1

Ich denke, es ist besser, alle vorhandenen Typen zuerst in Array zu sammeln (und nur neue Werte hinzufügen, wenn es nicht bereits existierte). Anschließend können Sie für jeden Typ Bereichselemente hinzufügen. Und Sie sollten nur einen "Kategorie" -Behälter haben, um alle Typen aufzulisten.

aktualisieren

Ihre Funktion zu oft ausgeführt wird (mehr als 20 Mal), weil Sie es jedes Mal Ihre $ grid.imagesLoaded anrufen() macht Fortschritte. Nennen Sie es, wenn Sie fertig sind. Versuchen

$grid.imagesLoaded().progress() 

mit

$grid.imagesLoaded().done() 

ersetzen Ihre Funktion aufrufen nur einmal, nachdem alle Bilder geladen sind. Zusätzlich können Sie den Kategoriecontainer leeren, bevor Sie ihn erneut füllen.