seletor de dados jquery

Preciso selecionar elementos com base nos valores armazenados no .data()objeto de um elemento . No mínimo, gostaria de selecionar propriedades de dados de nível superior usando seletores, talvez assim:

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

Ou talvez o seletor esteja no formato regular de seletor de atributos:

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

Ou no formato de atributo, mas com um especificador para indicar que está em .data():

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

Eu achei a implementação de James Padolsey simples, mas boa. O seletor formata os métodos de espelhamento mostrados nessa página. Há também este patch Sizzle .

Por alguma razão, lembro de ler um tempo atrás que o jQuery 1.4 incluiria suporte para seletores de valores no .data()objeto jquery . No entanto, agora que estou procurando, não consigo encontrá-lo. Talvez tenha sido apenas uma solicitação de recurso que eu vi. Existe suporte para isso e eu simplesmente não estou vendo?

Idealmente, eu gostaria de oferecer suporte a subpropriedades em data () usando a notação de ponto. Como isso:

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

Também gostaria de oferecer suporte a vários seletores de dados, onde apenas elementos com TODOS os seletores de dados especificados são encontrados. O seletor múltiplo de jquery regular faz uma operação OR. Por exemplo, $('a.big, a.small')seleciona atags com classe bigou small). Estou procurando um AND, talvez assim:

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

Por fim, seria ótimo se operadores de comparação e recursos regex estivessem disponíveis nos seletores de dados. Então $(a[:artist.id>5000])seria possível. Sei que provavelmente poderia fazer muito disso usando filter(), mas seria bom ter um formato seletor simples.

Quais soluções estão disponíveis para fazer isso? O Padolsey de Jame é a melhor solução no momento? Minha preocupação é principalmente com relação ao desempenho, mas também aos recursos extras, como notação de ponto de subpropriedade e vários seletores de dados. Existem outras implementações que suportam essas coisas ou são melhores de alguma forma?

Eu criei um novo dataseletor que deve permitir que você faça consultas aninhadas e condições AND. Uso:

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

O padrão é:

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

"operator" e "check" são opcionais. Portanto, se você apenas o tiver :data(a.b.c), simplesmente verificará a veracidade de a.b.c.

Você pode ver os operadores disponíveis no código abaixo. Entre eles está o ~=que permite o teste de regex:

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

Eu testei com algumas variações e parece funcionar muito bem. Provavelmente adicionarei isso como um repositório do Github em breve (com um conjunto de testes completo), então fique de olho!

O código:

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

    };

}());

No momento eu estou selecionando assim:

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

O que parece funcionar muito bem, mas seria bom se o jQuery pudesse selecionar por esse atributo sem o prefixo 'data-'.

Eu não testei isso com os dados adicionados aos elementos via jQuery dinamicamente, para que possa ser a queda desse método.

Você também pode usar uma função de filtragem simples sem nenhum plug-in. Não é exatamente isso que você deseja, mas o resultado é o mesmo:

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

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

Quero avisar que $('a[data-attribute=true]')não funciona, conforme a resposta de Ashley, se você anexou dados a um elemento DOM por meio da função data ().

Funciona como seria de esperar se você adicionasse um atributo de dados real ao seu HTML, mas o jQuery armazena os dados na memória, para que os resultados obtidos $('a[data-attribute=true]')não sejam corretos.

Você precisará usar o plug-in de dados http://code.google.com/p/jquerypluginsblog/ , usar a filtersolução de Dmitri ou fazer $ .each sobre todos os elementos e verificar .data () iterativamente

Existe um :data()plugin de filtro que faz exatamente isso :)

Alguns exemplos com base em sua pergunta:

$('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

O desempenho não será muito bom comparado ao que é possível , selecionar $._cachee pegar os elementos correspondentes é de longe o mais rápido, mas muito mais abrangente e não muito "jQuery-ey" em termos de como você consegue coisas (você geralmente vem do lado do elemento). Do meu ponto de vista, não tenho certeza se isso é mais rápido, já que o processo de passar de um ID exclusivo para um elemento é complicado em si, em termos de desempenho.

O seletor de comparação que você mencionou será o melhor a fazer em um .filter(), não há suporte interno para isso no plug-in, embora você possa adicioná-lo sem muitos problemas.

Você pode definir um data-*atributo em um olmo usando attr()e selecione usando esse atributo:

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

e agora para esse olmo, ambos attr()e data()renderá 123 :

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

No entanto, se você modificar o valor a ser 456 usando attr(), data() ainda será 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

Pelo que entendi, parece que você provavelmente deve evitar misturas attr()e data()comandos no seu código, se não for necessário. Porque attr()parece corresponder diretamente ao DOM enquanto data()interage com a 'memória', embora seu valor inicial possa ser do DOM. Mas o ponto principal é que os dois não estão necessariamente sincronizados.

Portanto, tenha cuidado.

De qualquer forma, se você não estiver alterando o data-*atributo no DOM ou na memória, não terá problemas. Assim que você começa a modificar os valores, é possível que surjam problemas em potencial.

Obrigado a @Clarence Liu à resposta de @ Ash, bem como a este post .

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

Funciona. Consulte Seletor de Igual ao Atributo [nome = ”valor”] .

Se você também usa o jQueryUI, obtém uma versão (simples) do :dataseletor que verifica a presença de um item de dados, para que você possa fazer algo como $("div:data(view)"), ou $( this ).closest(":data(view)").

Consulte http://api.jqueryui.com/data-selector/ . Não sei há quanto tempo eles têm, mas está lá agora!

Aqui está um plugin que simplifica a vida https://github.com/rootical/jQueryDataSelector

Use-o assim:

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