web-dev-qa-db-fra.com

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 attribut data-slide=number(le nombre étant respectivement 1,2,3,4,5).

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

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

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

ne correspond/retourne rien…

La raison pour laquelle je ne peux pas coder en dur la partie li est qu'il s'agit d'une variable accessible à l'utilisateur qui peut être remplacée par un élément différent si nécessaire. Par conséquent, il se peut que ce ne soit pas toujours un li.

Des idées sur ce que je manque?

jqueryjquery-selectorscustom-data-attribute
924
Jannis

Vous devez injecter la valeur de current dans un sélecteur attribut égal :

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

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

$("ul").find("[data-slide='" + current + "']");
1372
Frédéric Hamidi

au cas où vous ne voudriez pas taper tout cela, voici un moyen plus rapide d'interroger par attribut de données:

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

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

431
KevinDeus

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

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
215
psycho brm

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

Lorsque l'ancienne extension a été recherchée sur une paire clé-valeur, cette extension permet également 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/

36
bPratik

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:

Ceci est 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.
29
user1378423

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.

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

J'espère que cela fonctionnera mieux

merci

14
Jomin George Paul

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

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

Alors que cette $("ul[data-slide='" + current +"']"); fonctionnera pour:

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

13
Matas Vaitkevicius

Pour en revenir à sa question initiale, à savoir comment faire fonctionner ce travail sans connaître le type d'élément à l'avance, voici ce qui suit:

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