selettore dati jquery

Devo selezionare gli elementi in base ai valori memorizzati .data()nell'oggetto di un elemento . Come minimo, vorrei selezionare le proprietà dei dati di livello superiore utilizzando i selettori, forse in questo modo:

$('a').data("category","music");
$('a:data(category=music)');

O forse il selettore dovrebbe essere nel normale formato del selettore di attributi:

$('a[category=music]');

O in formato attributo, ma con un identificatore per indicare che è in .data():

$('a[:category=music]');

Ho trovato l'implementazione di James Padolsey semplice, ma buona. Il selettore formatta sopra i metodi mirror mostrati su quella pagina. C'è anche questa patch Sizzle .

Per qualche motivo, ricordo di aver letto qualche tempo fa che jQuery 1.4 avrebbe incluso il supporto per i selettori sui valori .data()nell'oggetto jquery . Tuttavia, ora che lo sto cercando, non riesco a trovarlo. Forse è stata solo una richiesta di funzionalità che ho visto. C'è supporto per questo e non lo vedo?

Idealmente, vorrei supportare le sotto-proprietà nei dati () usando la notazione a punti. Come questo:

$('a').data("user",{name: {first:"Tom",last:"Smith"},username: "tomsmith"});
$('a[:user.name.first=Tom]');

Vorrei anche supportare più selettori di dati, in cui sono presenti solo elementi con TUTTI i selettori di dati specificati. Il selettore multiplo jquery normale esegue un'operazione OR. Ad esempio, $('a.big, a.small')seleziona i atag con una classe bigo small). Sto cercando un AND, forse così:

$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');

Infine, sarebbe fantastico se gli operatori di confronto e le funzionalità regex fossero disponibili sui selettori di dati. Quindi $(a[:artist.id>5000])sarebbe possibile. Mi rendo conto che probabilmente avrei potuto fare molto di questo usandofilter() , ma sarebbe bello avere un semplice formato di selezione.

Quali soluzioni sono disponibili per farlo? Jame's Padolsey è la migliore soluzione in questo momento? La mia preoccupazione riguarda principalmente le prestazioni, ma anche le funzionalità extra come la notazione delle proprietà secondarie e i selettori di dati multipli. Ci sono altre implementazioni che supportano queste cose o sono migliori in qualche modo?

Ho creato un nuovo dataselettore che dovrebbe consentirti di eseguire query nidificate e condizioni AND. Uso:

$('a:data(category==music,artist.name==Madonna)');

Lo schema è:

:data( {namespace} [{operator} {check}]  )

"operator" e "check" sono opzionali. Quindi, se solo lo hai :data(a.b.c), verificherai semplicemente la veridicità dia.b.c .

Puoi vedere gli operatori disponibili nel codice qui sotto. Tra questi c'è quello ~=che consente il test regex:

$('a:data(category~=^mus..$,artist.name~=^M.+a$)');

L'ho provato con alcune varianti e sembra funzionare abbastanza bene. Probabilmente lo aggiungerò presto come repository Github (con una suite di test completa), quindi dai un'occhiata!

Il codice:

(function(){

    var matcher = /\s*(?:((?:(?:\\\.|[^.,])+\.?)+)\s*([!~><=]=|[><])\s*("|')?((?:\\\3|.)*?)\3|(.+?))\s*(?:,|$)/g;

    function resolve(element, data) {

        data = data.match(/(?:\\\.|[^.])+(?=\.|$)/g);

        var cur = jQuery.data(element)[data.shift()];

        while (cur && data[0]) {
            cur = cur[data.shift()];
        }

        return cur || undefined;

    }

    jQuery.expr[':'].data = function(el, i, match) {

        matcher.lastIndex = 0;

        var expr = match[3],
            m,
            check, val,
            allMatch = null,
            foundMatch = false;

        while (m = matcher.exec(expr)) {

            check = m[4];
            val = resolve(el, m[1] || m[5]);

            switch (m[2]) {
                case '==': foundMatch = val == check; break;
                case '!=': foundMatch = val != check; break;
                case '<=': foundMatch = val <= check; break;
                case '>=': foundMatch = val >= check; break;
                case '~=': foundMatch = RegExp(check).test(val); break;
                case '>': foundMatch = val > check; break;
                case '<': foundMatch = val < check; break;
                default: if (m[5]) foundMatch = !!val;
            }

            allMatch = allMatch === null ? foundMatch : allMatch && foundMatch;

        }

        return allMatch;

    };

}());

Al momento sto selezionando in questo modo:

$('a[data-attribute=true]')

Il che sembra funzionare bene, ma sarebbe bello se jQuery fosse in grado di selezionare per quell'attributo senza il prefisso 'data-'.

Non ho provato questo con i dati aggiunti agli elementi tramite jQuery in modo dinamico, quindi potrebbe essere la rovina di questo metodo.

Puoi anche utilizzare una semplice funzione di filtro senza plug-in. Questo non è esattamente quello che vuoi ma il risultato è lo stesso:

$('a').data("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});

$('a').filter(function() {
    return $(this).data('user') && $(this).data('user').name.first === "Tom";
});

Voglio avvertirti $('a[data-attribute=true]') non funziona, secondo la risposta di Ashley, se hai collegato i dati a un elemento DOM tramite la funzione data ().

Funziona come ci si aspetterebbe se si aggiungesse un vero attr di dati nel proprio HTML, ma jQuery memorizza i dati in memoria, quindi i risultati che si $('a[data-attribute=true]')otterrebbero non sarebbero corretti.

Dovrai utilizzare il plug-in di dati http://code.google.com/p/jquerypluginsblog/ , utilizzare la filtersoluzione di Dmitri o fare $ .each su tutti gli elementi e controllare .data () iterativamente

C'è un :data()plug-in di filtro che fa proprio questo :)

Alcuni esempi basati sulla tua domanda:

$('a:data("category=music")')
$('a:data("user.name.first=Tom")');
$('a:data("category=music"):data("artist.name=Madonna")');
//jQuery supports multiple of any selector to restrict further, 
//just chain with no space in-between for this effect

Le prestazioni non saranno estremamente grandi rispetto a ciò che è possibile , selezionare $._cachee afferrare gli elementi corrispondenti è di gran lunga il più veloce, ma molto più circolare e non molto "jQuery-ey" in termini di come si arriva a roba (di solito arrivi dal lato dell'elemento). In cima alla mia testa, non sono sicuro che questo sia comunque il più veloce poiché il processo di passaggio dall'ID univoco all'elemento è contorto in sé, in termini di prestazioni.

Il selettore di confronto che hai citato sarà il migliore da fare in a .filter(), non c'è supporto integrato per questo nel plugin, anche se potresti aggiungerlo senza troppi problemi.

Puoi impostare un data-*attributo su un olm usando attr(), quindi selezionare usando quell'attributo:

var elm = $('a').attr('data-test',123); //assign 123 using attr()
elm = $("a[data-test=123]"); //select elm using attribute

e ora per quell'olmo, entrambi attr()e data()cederanno 123 :

console.log(elm.attr('data-test')); //123
console.log(elm.data('test')); //123

Tuttavia, se si modifica il valore per essere 456 utilizzando attr(), data() sarà comunque 123 :

elm.attr('data-test',456); //modify to 456
elm = $("a[data-test=456]"); //reselect elm using new 456 attribute

console.log(elm.attr('data-test')); //456
console.log(elm.data('test')); //123

Quindi, a quanto ho capito, sembra che probabilmente dovresti evitare di mescolare attr()e data()comandi nel tuo codice se non devi. Perché attr()sembra corrispondere direttamente con il DOM mentre data()interagisce con la "memoria", sebbene il suo valore iniziale possa provenire dal DOM. Ma il punto chiave è che i due non sono necessariamente sincronizzati.

Quindi stai solo attento.

In ogni caso, se non stai modificando l' data-*attributo nel DOM o nella memoria, non avrai problemi. Non appena si inizia a modificare i valori è quando possono sorgere potenziali problemi.

Grazie a @Clarence Liu alla risposta di @ Ash, così come a questo post .

$('a[data-category="music"]')

Funziona. Vedi il selettore degli attributi uguale [nome = "valore"] .

Se usi anche jQueryUI, otterrai una versione (semplice) del :dataselettore che controlla la presenza di un elemento di dati, in modo da poter fare qualcosa del genere $("div:data(view)"), o $( this ).closest(":data(view)").

Vedi http://api.jqueryui.com/data-selector/ . Non so da quanto tempo ce l'hanno, ma è lì adesso!

Ecco un plugin che semplifica la vita https://github.com/rootical/jQueryDataSelector

Usalo così:

data selector           jQuery selector
  $$('name')              $('[data-name]')
  $$('name', 10)          $('[data-name=10]')
  $$('name', false)       $('[data-name=false]')
  $$('name', null)        $('[data-name]')
  $$('name', {})          Syntax error