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

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

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

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

<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 () здесь не поможет. Также важно, что первый-это тот, который остается показывающим, поэтому переупорядочение не может произойти.

6
jquery jquery-selectors

4 ответов

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

var found = {};

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

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

Как насчет чего-то вроде этого:

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

демо:http://jsfiddle.net/CsTQT/

4

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

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

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

2

это означает : если вы выбираете первый элемент, вы хотите скрыть каждого брата ; Так что используйте 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. выберите первый via :eq(0)

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

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

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

3.Спрячь его!--12--> 

brothers.hide()
0