jQuery comment trouver un élément basé sur une valeur d'attribut de données?

J'ai le scénario suivant:

var el = 'li';

et il y a 5 <li>sur la page chacun avec un data-slide=numberattribut (le nombre étant 1,2,3,4,5 respectivement) .

Je dois maintenant trouver le numéro de diapositive actuellement actif qui est mappé var current = $('ul').data(current);et mis à jour à chaque changement de diapositive.

Jusqu'à présent, mes essais ont échoué, essayant de construire le sélecteur qui correspondrait à la diapositive actuelle:

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

ne correspond / ne renvoie rien…

La raison pour laquelle je ne peux pas coder en dur la lipartie est qu'il s'agit d'une variable accessible à l'utilisateur qui peut être changée en un élément différent si nécessaire, donc ce n'est pas toujours un li.

Des idées sur ce qui me manque?

Vous devez injecter la valeur de currentdans un sélecteur d' égalité d'attribut :

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

Pour les environnements JavaScript plus anciens ( ES5 et versions antérieures):

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

au cas où vous ne voudriez pas taper tout cela, voici un moyen plus court de rechercher par attribut de données:

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

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

Lors de la recherche avec [data-x = ...], attention, cela ne fonctionne pas avec le 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

Vous pouvez utiliser ceci à la place:

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

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

J'ai amélioré l'extension filterByData de psycho brm à jQuery.

Lorsque l'ancienne extension recherchait une paire clé-valeur, cette extension vous permet en outre de rechercher la présence d'un attribut de données, quelle que soit sa valeur.

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

Usage:

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

Ou le violon: http://jsfiddle.net/PTqmE/46/

Sans JQuery, ES6

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

Je sais que la question concerne JQuery, mais les lecteurs voudront peut-être une méthode JS pure.

J'ai rencontré le même problème lors de la récupération d'éléments à l'aide de jQuery et de l'attribut data- *.

donc pour votre référence le code le plus court est ici:

Voici mon code HTML:

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

Voici mon sélecteur 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 + "']");

J'espère que cela fonctionnera mieux

Merci

Ce sélecteur $("ul [data-slide='" + current +"']");fonctionnera pour la structure suivante:

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

Bien que cela $("ul[data-slide='" + current +"']");fonctionne pour:

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

Pour revenir à sa question initiale, sur la façon de faire fonctionner cela sans connaître à l'avance le type d'élément, voici ce qui suit:

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