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

J’ai le scénario suivant:

var el = 'li'; 

et il y a 5

  • sur la page, chacun avec un atsortingbut data-slide=number (le numéro étant respectivement 1,2,3,4,5) .

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

    Jusqu’à présent, mes tentatives ont échoué, en essayant de construire le sélecteur correspondant à 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 est que c’est une variable accessible par l’utilisateur qui peut être modifiée en un élément différent si nécessaire, de sorte qu’il ne soit pas toujours un li .

    Des idées sur ce qui me manque?

    Vous devez injecter la valeur du current dans un sélecteur Atsortingbute Equals :

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

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

     $("ul").find("[data-slide='" + current + "']"); 
  • Si vous ne voulez pas taper tout cela, voici un moyen plus rapide d’interroger par l’atsortingbut data:

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

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

    Lors de la recherche avec [data-x = …], faites attention, cela ne fonctionne pas avec le setter jQuery.data (..) :

     $('' ).is('[data-x=1]') // this works > true $('').data('x', 1).is('[data-x=1]') // this doesn't > false $('').attr('data-x', 1).is('[data-x=1]') // this is the workaround > true 

    Vous pouvez l’utiliser à la place:

     $.fn.filterByData = function(prop, val) { return this.filter( function() { return $(this).data(prop)==val; } ); } $('').data('x', 1).filterByData('x', 1).length > 1 

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

    Lorsque l’extension précédente était recherchée sur une paire clé-valeur, avec cette extension, vous pouvez également rechercher la présence d’un atsortingbut 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:

     $('').data('x', 1).filterByData('x', 1).length // output: 1 $('').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 + "
    "); }
     #bPratik { font-family: monospace; } 
      

    Setup

    Data added inline :: data-prop="val"
    Data added inline :: data-prop="val"
    Data added inline :: data-prop="diffval"
    Data added inline :: data-test="val"
    Data will be added via jQuery

    Output


    J’ai été confronté au même problème lors de l’extraction d’éléments à l’aide de l’atsortingbut jQuery et data- *.

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

    Ceci est mon code HTML:

     

    Ceci est mon sélecteur jQuery:

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

    Pour revenir à sa question initiale, à savoir comment faire ce travail sans connaître le type d’élément à l’avance, procédez comme suit:

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

    J’espère que cela fonctionnera mieux

    Merci

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

     

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

    Sans JQuery, ES6

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

    Je sais que la question concerne JQuery, mais les lecteurs peuvent vouloir une méthode JS pure.