tiene - obtener valor de un boton jquery

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

Question

Tengo el siguiente escenario:

var el = ''li'';

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

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

Hasta ahora mis intentos no han tenido éxito, al intentar construir el selector que coincidiría con la diapositiva actual:

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

no coincide / devuelve nada ...

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

¿Alguna idea sobre lo que me estoy perdiendo?

Answer 1

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.

Answer 2

Al buscar con [data-x = ...], tenga cuidado, no funciona con el configurador 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

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

Answer 3

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

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

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

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

Answer 4

He enfrentado el mismo problema al obtener elementos utilizando jQuery y data- * attribute.

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.

Answer 5

Tienes que inyectar el valor de current en un selector de atributos de atributos :

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

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

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

Answer 6

Volviendo a su pregunta original, acerca de cómo hacer este trabajo sin conocer el tipo de elemento de antemano, lo siguiente hace esto:

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

Answer 7

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

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

Para su información: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

Answer 8

share a jQuery.

Donde la extensión anterior buscó en un par clave-valor, con esta extensión, además, 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/

Answer 9

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

Espero que esto funcione mejor

Gracias