jQuery como encontrar um elemento com base em um valor de atributo de dados?

Eu tenho o seguinte cenário:

var el = 'li'; 

e há 5

  • na página, cada um com um atributo data-slide=number (número sendo 1,2,3,4,5 respectivamente) .

    Agora preciso encontrar o número do slide atualmente ativo que é mapeado para var current = $('ul').data(current); e é atualizado em cada alteração de slide.

    Até agora, minhas tentativas foram malsucedidas, tentando construir o seletor que corresponderia ao slide atual:

     $('ul').find(el+[data-slide=+current+]); 

    não corresponde / retorna nada…

    O motivo pelo qual não posso codificar a parte li é que essa é uma variável acessível ao usuário que pode ser alterada para um elemento diferente, se necessário, portanto, nem sempre é um li .

    Alguma idéia do que estou perdendo?

    Você tem que injetar o valor da current em um seletor Attribute Equals :

     $("ul").find(`[data-slide='${current}']`) 

    Para ambientes JavaScript mais antigos (ES5 e anteriores):

     $("ul").find("[data-slide='" + current + "']"); 
  • Caso você não queira digitar tudo isso, aqui está uma maneira mais curta de consultar pelo atributo de dados:

     $("ul[data-slide='" + current +"']"); 

    FYI: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

    Ao pesquisar com [data-x = …], atente, ele não funciona com o setter jQuery.data (..) :

     $('' ).is('[data-x=1]') // this works > true $('').data('x', 1).is('[data-x=1]') // this doesn't > false $('').attr('data-x', 1).is('[data-x=1]') // this is the workaround > true 

    Você pode usar isto em vez disso:

     $.fn.filterByData = function(prop, val) { return this.filter( function() { return $(this).data(prop)==val; } ); } $('').data('x', 1).filterByData('x', 1).length > 1 

    Eu melhorei a extensão filterByData do psycho brm para jQuery.

    Onde a extensão anterior pesquisou em um par de valores-chave, com essa extensão, você também pode procurar a presença de um atributo de dados, independentemente de seu valor.

     (function ($) { $.fn.filterByData = function (prop, val) { var $self = this; if (typeof val === 'undefined') { return $self.filter( function () { return typeof $(this).data(prop) !== 'undefined'; } ); } return $self.filter( function () { return $(this).data(prop) == val; } ); }; })(window.jQuery); 

    Uso:

     $('').data('x', 1).filterByData('x', 1).length // output: 1 $('').data('x', 1).filterByData('x').length // output: 1 
     // test data function extractData() { log('data-prop=val ...... ' + $('div').filterByData('prop', 'val').length); log('data-prop .......... ' + $('div').filterByData('prop').length); log('data-random ........ ' + $('div').filterByData('random').length); log('data-test .......... ' + $('div').filterByData('test').length); log('data-test=anyval ... ' + $('div').filterByData('test', 'anyval').length); } $(document).ready(function() { $('#b5').data('test', 'anyval'); }); // the actual extension (function($) { $.fn.filterByData = function(prop, val) { var $self = this; if (typeof val === 'undefined') { return $self.filter( function() { return typeof $(this).data(prop) !== 'undefined'; }); } return $self.filter( function() { return $(this).data(prop) == val; }); }; })(window.jQuery); //just to quickly log function log(txt) { if (window.console && console.log) { console.log(txt); //} else { // alert('You need a console to check the results'); } $("#result").append(txt + "
    "); }
     #bPratik { font-family: monospace; } 
      

    Setup

    Data added inline :: data-prop="val"
    Data added inline :: data-prop="val"
    Data added inline :: data-prop="diffval"
    Data added inline :: data-test="val"
    Data will be added via jQuery

    Output


    Eu enfrentei o mesmo problema ao buscar elementos usando o atributo jQuery e data- *.

    então, para sua referência, o código mais curto está aqui:

    Este é o meu código HTML:

     

    Este é o meu seletor de jQuery:

     $('section[data-js="carousel"]'); // this will return array of the section elements which has data-js="carousel" attribute. 

    Voltando à sua pergunta original, sobre como fazer isso funcionar sem conhecer o tipo de elemento antecipadamente, o seguinte faz isto:

     $(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']"); 
     $("ul").find("li[data-slide='" + current + "']"); 

    Espero que isso funcione melhor

    obrigado

    Este seletor $("ul [data-slide='" + current +"']"); vai trabalhar para a seguinte estrutura:

     

    Enquanto este $("ul[data-slide='" + current +"']"); vai trabalhar para:

    Sem JQuery, ES6

     document.querySelectorAll(`[data-slide='${current}']`); 

    Eu sei que a questão é sobre o JQuery, mas os leitores podem querer um método JS puro.