jQuery come trovare un elemento basato su un valore di attributo di dati?

Ho il seguente scenario:

var el = 'li';

e ci sono 5 <li>sulla pagina ciascuno con un data-slide=numberattributo (il numero è rispettivamente 1,2,3,4,5) .

Ora ho bisogno di trovare il numero di diapositiva attualmente attivo che è mappato var current = $('ul').data(current);e viene aggiornato ad ogni cambio di diapositiva.

Finora i miei tentativi non hanno avuto successo, cercando di costruire il selettore che corrisponderebbe alla diapositiva corrente:

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

non corrisponde / non restituisce nulla ...

Il motivo per cui non riesco a codificare la liparte è che questa è una variabile accessibile dall'utente che può essere cambiata in un elemento diverso, se necessario, quindi potrebbe non essere sempre una li.

Qualche idea su cosa mi sto perdendo?

Devi currentinserire il valore di in un selettore Attributo uguale :

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

Per ambienti JavaScript meno recenti ( ES5 e precedenti):

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

nel caso in cui non si desideri digitare tutto ciò, ecco un modo più breve per eseguire una query per attributo di dati:

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

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

Durante la ricerca con [data-x = ...], attenzione, non funziona con il setter jQuery.data (..) :

$('<b data-x="1">'  ).is('[data-x=1]') // this works
> true

$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

È possibile utilizzare questo invece:

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}

$('<b>').data('x', 1).filterByData('x', 1).length
> 1

Ho migliorato l'estensione filterByData di psycho brm a jQuery.

Laddove la precedente estensione ha cercato su una coppia chiave-valore, con questa estensione è inoltre possibile cercare la presenza di un attributo dati, indipendentemente dal suo valore.

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

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').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 + "<br />");
}

#bPratik {
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="bPratik">
  <h2>Setup</h2>
  <div id="b1" data-prop="val">Data added inline :: data-prop="val"</div>
  <div id="b2" data-prop="val">Data added inline :: data-prop="val"</div>
  <div id="b3" data-prop="diffval">Data added inline :: data-prop="diffval"</div>
  <div id="b4" data-test="val">Data added inline :: data-test="val"</div>
  <div id="b5">Data will be added via jQuery</div>
  <h2>Output</h2>
  <div id="result"></div>

  <hr />
  <button onclick="extractData()">Reveal</button>
</div>

O il violino: http://jsfiddle.net/PTqmE/46/

Senza JQuery, ES6

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

So che la domanda riguarda JQuery, ma i lettori potrebbero desiderare un metodo JS puro.

Ho riscontrato lo stesso problema durante il recupero degli elementi utilizzando l'attributo jQuery e data- *.

quindi per tuo riferimento il codice più breve è qui:

Questo è il mio codice HTML:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

Questo è il mio selettore jQuery:

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

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

Spero che possa funzionare meglio

Grazie

Questo selettore $("ul [data-slide='" + current +"']");funzionerà per la seguente struttura:

<ul><li data-slide="item"></li></ul>  

Mentre questo $("ul[data-slide='" + current +"']");funzionerà per:

<ul data-slide="item"><li></li></ul>

Tornando alla sua domanda originale, su come farlo funzionare senza conoscere in anticipo il tipo di elemento, il seguente fa:

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