Как выбрать элементы с одинаковым значением атрибута в jQuery?

Question

Скажем, у меня есть такая структура:

<div data-stuff="foo"></div>
<div data-stuff="foo"></div>
<div data-stuff="foo"></div>
<div data-stuff="bar"></div>
<div data-stuff="bar"></div>
<div data-stuff="bar"></div>
<div data-stuff="baz"></div>

И я хочу скрыть все div с одним и тем же атрибутом, кроме первого, поэтому я получу:

<div data-stuff="foo"></div>
<div data-stuff="bar"></div>
<div data-stuff="baz"></div>

Теперь я знаю, что могу сделать это:

$('[data-stuff=foo]:gt(0), [data-stuff=bar]:gt(0), [data-stuff=baz]:gt(0)').hide();

Проблема в том, что значение data-stuff генерируется динамически и непредсказуемо. Что я мог сделать, чтобы выполнить эту задачу?

РЕДАКТИРОВАТЬ

Сами элементы DOM не обязательно совпадают, поэтому $ .unique () здесь не поможет. Также важно, чтобы показывался ПЕРВЫЙ, поэтому переупорядочивание быть не может.

Answer 1

Путь грубой силы:

var found = {};

$("[rel]").each(function(){
    var $this = $(this);
    var rel = $this.attr("rel");

    if(found[rel]){
        $this.hide();
    }else{
        found[rel] = true;
    }
});

Answer 2

Как насчет этого:

$('div[rel]:visible').each(function(){
    var rel = $(this).attr('rel');
    $(this).nextAll('div[rel="'+rel+'"]').hide();
});

ДЕМО: http://jsfiddle.net/CsTQT/

Answer 3

Во-первых, rel не используется для хранения данных. Согласно W3C, rel описывает «связь между текущим документом и привязкой, указанную атрибутом href. Значением этого атрибута является разделенный пробелами список типов ссылок».

Во-вторых, rel является атрибутом <a> и <link>. Вы действительно хотите использовать атрибут data-* HTML5. Не беспокойтесь о поддержке браузера, она работает вплоть до IE 66 (возможно, 5).

Это будет доступно через функцию JQuery $.data('name').

<div data-foo="bar"></div>

будет доступно через:

$('div').filter(function(inputs){
    return $(this).data('foo') === 'bar';
}).hide()

Answer 4

Это значит: если вы выберете первый элемент, вы захотите спрятать каждого брата; Поэтому используйте плагин JBrothersByAttr jquery, который является частью Mounawa3et منوعات Плагин Jquery :

$('[data-stuff=foo]:eq(0)').brothersByAttr('data-stuff').hide();
$('[data-stuff=bar]:eq(0)').brothersByAttr('data-stuff').hide();
$('[data-stuff=baz]:eq(0)').brothersByAttr('data-stuff').hide();

Демо: http://jsfiddle.net/abdennour/7ypEa/1/

Объяснение: 1. выберите первое с помощью :eq(0)

   var jq= $('[data-stuff=foo]:eq(0)')

2.Выберите другие элементы с одинаковым значением data-stuff attr через JBrothersByAttr:

   var brothers=jq.brothersByAttr('data-stuff')

3.Скрыть это

brothers.hide()