jQuery comment trouver un élément basé sur un attribut data-valeur?

Question

J'ai le scénario suivant:

var el = 'li';

et il y a 5 <li>s'sur la page de chaque avec un data-slide=number d'attribut (numéro 1,2,3,4,5 respectivement).

J'ai maintenant besoin de trouver le numéro de la diapositive qui est mappé à l' var current = $('ul').data(current); et est mis à jour sur chaque diapositive changement.

Jusqu'à présent mes tentatives ont été infructueuses, en essayant de construire le sélecteur qui correspondent à la diapositive en cours:

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

ne correspond pas/retourne rien...

La raison pour laquelle je ne peux pas coder en dur l' li , c'est que c'est un utilisateur accessible variable qui peut être changé pour un autre élément, si nécessaire, de sorte qu'il peut ne pas toujours être un li.

Toutes les idées sur ce que je suis absent?

Answer 1

Vous avez à injecter la valeur de current dans un Attribut est Égal à sélecteur:

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

Answer 2

dans le cas où vous ne voulez pas taper tout ça, voici un moyen plus court de la requête par l'attribut de données:

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

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

Answer 3

Lors d'une recherche avec [data-x=...], attention, il ne fonctionne pas avec jQuery.de données(..) 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 l'utiliser à 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

Answer 4

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

Où l'ancienne extension recherché sur une paire clé-valeur, avec cette extension, vous pouvez aussi 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);

Utilisation:

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

Voir jouer du Violon pour de meilleurs exemples: http://jsfiddle.net/pratik136/PTqmE/

Answer 5

J'ai rencontré le même problème lors de l'extraction des éléments à l'aide de jQuery et de données* attribut.

donc, pour votre référence les plus brefs code est ici:

C'est mon Code HTML:

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

C'est mon sélecteur jQuery:

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