¿Cómo encontrar un elemento basado en un valor de atributo de datos?

Tengo el siguiente escenario:

var el = 'li';

y hay 5 <li>en la página cada uno con un data-slide=numberatributo (el número es 1,2,3,4,5 respectivamente) .

Ahora necesito encontrar el número de diapositiva activo actualmente que se asigna var current = $('ul').data(current);y se actualiza en cada cambio de diapositiva.

Hasta ahora, mis intentos no han tenido éxito, tratando de construir el selector que coincida con la diapositiva actual:

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

no coincide / devuelve nada ...

La razón por la que no puedo codificar la liparte es que esta es una variable accesible para el usuario que se puede cambiar a un elemento diferente si es necesario, por lo que puede no ser siempre una li.

¿Alguna idea de lo que me falta?

Debe inyectar el valor de currenten un selector de Atributo igual :

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

Para entornos JavaScript más antiguos ( ES5 y anteriores):

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

en caso de que no desee escribir todo eso, aquí hay una forma más corta de consultar por atributo de datos:

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

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

Cuando busque con [data-x = ...], tenga cuidado, no funciona con jQuery.data (..) setter :

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

Puedes usar esto en su lugar:

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

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

Creo que he mejorado en filterByData extensión de BRM psico a jQuery.

Cuando la extensión anterior buscó en un par clave-valor, con esta extensión también puede buscar la presencia de un atributo de datos, independientemente de su 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:

$('<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 el violín: http://jsfiddle.net/PTqmE/46/

Sin JQuery, ES6

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

Sé que la pregunta es sobre JQuery, pero los lectores pueden querer un método JS puro.

Me he enfrentado al mismo problema al buscar elementos usando jQuery y el atributo data- *.

así que para su referencia, el código más corto está aquí:

Este es mi código HTML:

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

Este es mi selector 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 + "']");

Espero que esto funcione mejor

Gracias

Este selector $("ul [data-slide='" + current +"']");funcionará para la siguiente estructura:

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

Si bien esto $("ul[data-slide='" + current +"']");funcionará para:

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

Volviendo a su pregunta original, sobre cómo hacer que esto funcione sin conocer de antemano el tipo de elemento, lo siguiente hace esto:

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