使用jQuery隐藏具有非唯一属性的元素

Hiding elements having non-unique attributes with jQuery

本文关键字：唯一 属性 元素 jQuery 隐藏 使用      更新时间：2024-01-07

我在一个长列表中有一些元素。我想做的是在属性data-title中搜索具有非唯一属性值的元素，并隐藏所有多余的元素，这样只剩下1个。

考虑以下列表：

<div data-title="big hero 6">title</div>
<div data-title="big hero 6">title</div>
<div data-title="american sniper">title</div>
<div data-title="big hero 6">title</div>
<div data-title="some movie about cats">title</div>

由于有3个元素具有相同的属性值"big hero 6"，所以我想隐藏前2个元素，这样就只剩下最后一个了。

我怎样才能做到这一点？

在jQuery隐藏它们之后，原始HTML中的结果将类似于此：

<div data-title="big hero 6" style="display:none;">title</div>
<div data-title="big hero 6" style="display:none;">title</div>
<div data-title="american sniper">title</div>
<div data-title="big hero 6">title</div>
<div data-title="some movie about cats">title</div>

遍历具有data-title属性的所有元素。

获取每个元素的标题，然后使用.nextAll('[data-title="' + title + '"]')检查后续的同级元素是否具有相同的data-title属性值。

如果任何其他后续的同级元素具有相同的值，请隐藏该元素。

此处示例

$('[data-title]').each(function () {
    var title = $(this).data('title'),
        occurrences = $(this).nextAll('[data-title="' + title + '"]').length;
    if (occurrences) {
        $(this).hide();
    }
});
相关文章：