Question

我在一长列表中有一些元素。我想要做的是搜索属性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个元素具有相同的属性值＆＃34; big hero 6＆＃34;，我想隐藏前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>

Answer 1

使用data-title属性迭代所有元素。

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

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

Example Here

$('[data-title]').each(function () {
    var title = $(this).data('title'),
        occurrences = $(this).nextAll('[data-title="' + title + '"]').length;

    if (occurrences) {
        $(this).hide();
    }
});

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

1 个答案: