JS Удалить дубликат div на основе атрибута

Question

Я хотел бы удалить повторяющиеся записи с тем же заголовком и src, но я не знаю как.

<ul> 
    <li><img class="test" src="secret/photo.jpg" title="Tester1"></li> 
    <li><img class="test" src="secret/photo.jpg" title="Tester2"></li> 
    <li><img class="test" src="secret/photo.jpg" title="Tester2"></li> 
    <li><img class="test" src="secret/photo2.jpg" title="Tester2"></li> 
    <li><img class="test" src="secret/photo2.jpg" title="Tester2"></li> 
</ul> 

Результат должен быть

<li><img class="test" src="secret/photo.jpg" title="Tester1"></li> 
<li><img class="test" src="secret/photo.jpg" title="Tester2"></li> 
<li><img class="test" src="secret/photo2.jpg" title="Tester2"></li> 

Я использовал эту функцию, но она не работает.

function unique(array) { 
    return $.grep(array, function(el, index) { 
     return index == $.inArray(el, array); 
    }); 
} 

Спасибо

Answer 1

Попробуйте

var $lis = $('ul li').filter(function() { 
    var $img = $(this).find('img'), 
     src = $img.attr('src'), 
     title = $img.attr('title'); 
    return $(this).nextAll('li:has(img[src="' + src + '"][title="' + title + '"])').length == 0 
}) 

$('ul li').not($lis).remove() 

Demo: Fiddle

Answer 2

Вот working fiddle.

Оператор == возвращает true только в том случае, если элемент идентичен, если у него одинаковый контент. Затем вы должны хранить в заголовках массивов, а затем проверить, находится ли заголовок в массиве или нет.

function unique(array) { 
    var titles = []; 
    return $.grep(array, function (el, index) { 
     var $img = $('img', el); 
     if ($.inArray($img.prop('title'), titles) >= 0) { 
      return false; 
     } 
     titles.push($img.prop('title')); 
     return true; 
    }); 
} 

Я передал значение массива в функцию таким образом.

unique($('li')) 

Если вы хотите передать что-то вроде этого unique($('li img')) вы можете, но вы должны изменить эту строку var $img = $('img', el); тоже (var $img = $(el); достаточно в данном случае).

Answer 3

Это решение, которое создает строку путем объединения заголовка и URL-адреса img, а затем проверяет уникальные строки в списке.

(после предоставления идентификатора myul в ul)

<ul id="myul"> 

Javascript/JQuery:

uniqueLi = {}; 

$("#myul li").each(function() { 
    var thisTxt = $('img', this).attr("title"); 
    var thisImg = $('img', this).attr("src"); 
    var uString = thisTxt.concat(thisImg); 
    if (!(uString in uniqueLi)) { 
     uniqueLi[uString] = ""; 
    } else { 
     $(this).remove(); 
    } 
}) 

Jsfiddle: http://jsfiddle.net/B6A2B/