Come selezionare gli elementi con lo stesso valore di attributo in jQuery?

Dire che ho una struttura in questo modo:Come selezionare gli elementi con lo stesso valore di attributo in 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>

E voglio nascondere tutti i div con lo stesso attributo, tranne la prima, quindi mi piacerebbe avere:

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

Ora so io poteva solo fare questo:

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

il problema è che il valore di data-stuff è generato dinamicamente ed è imprevedibile. Cosa potrei fare per portare a termine questo compito?

EDIT

Gli elementi DOM stessi non sono necessariamente la stessa, in modo da $ .unique() non aiuterà qui. È anche importante che il PRIMO sia quello che rimane visibile, quindi non è possibile riordinare.

fonte

2012-02-16 Kyle Macey

P.S. '$ .unique' non funziona come credi. '$ .unique' è per gli array di elementi DOM, jQuery lo usa internamente quando crea oggetti jQuery. –

possibile duplicato di [jQuery - Come selezionare per attributo] (http://stackoverflow.com/questions/9210073/jquery-how-to-select-by-attribute) –

Perché non è possibile eseguire il codice sopra quando il 'rel' è cambiato? – JKirchartz

Il modo in cui la forza bruta:

var found = {}; 

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

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

fonte

2012-02-16 20:21:58

+1 sì, questo è quello che stavo pensando. Non so se c'è un selettore per questo per dire ... – pixelbobby

Che ne dite di qualcosa di simile:

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

DEMO: http://jsfiddle.net/CsTQT/

fonte

2012-02-16 20:21:37

Nota che 'nextAll' funziona solo per i fratelli, quindi se la struttura html è in realtà più complessa dell'esempio pubblicato, questo potrebbe non funzionare. –

Unforunately, @JamesMontagne ha ragione. Avrei dovuto tenerlo in considerazione per la mia domanda e mi sono scusato. Avrei +2 se potessi per avere il jsfiddle –

In primo luogo, rel non viene utilizzato per la memorizzazione dei dati. Secondo il W3C, rel descrive "la relazione dal documento corrente all'ancora specificata dall'attributo href.Il valore di questo attributo è un elenco di tipi di collegamenti separati dallo spazio."

In secondo luogo, rel è solo un attributo su <a> e <link>. Vuoi davvero usare l'attributo HTML5 data-*. Non preoccuparti del supporto del browser, funziona fino a IE 66 (probabilmente 5).

Questo sarà accessibile tramite la funzione JQuery $.data('name').

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

sarà accessibile via:

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

fonte

2012-02-16 20:29:04

Siamo spiacenti. In realtà non sto usando rel. Ho avuto un esempio nei frammenti di codice che utilizzavano la stessa cosa con i tag di ancoraggio, ed era una copia e incolla veloce poi come un ripensamento li ho cambiati in DIV. Buona cattura, però –

che è mezzo: se si seleziona il primo elemento, si vuole nascondere ogni fratelli; Così utilizzare JBrothersByAttr plugin per jQuery che è una parte di Mounawa3et منوعات Jquery plugin:

$('[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();

Demo:http://jsfiddle.net/abdennour/7ypEa/1/

Spiegazione: 1. selezionare la prima via :eq(0)

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

2.selezionare gli altri elementi che hanno lo stesso valore di data-stuff attr via JBrothersByAttr:

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

3.Hide esso

brothers.hide()

fonte

2013-10-05 10:40:49

Come selezionare gli elementi con lo stesso valore di attributo in jQuery?

risposta

Problemi correlati