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()

演示：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

这是一个解决方案，它通过连接img的标题和URL来创建字符串，然后检查列表中的唯一字符串。

（在将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/

JS根据属性删除重复的div

3 个答案: