jQuery 1.4.4: Comment trouver un élément en fonction de sa valeur d'attribut de données?

Question

J'imagine que cela devrait être une tâche assez trivial mais en utilisant Firefox pour Mac, 3.6.12 ce qui suit ne fonctionne pas:

// assign data attributes 
$('.gallery li').each(function(i) { 
    $(this).data('slide',i+1); 
}); 

// outputting an empty jQuery object 
console.log($('.gallery li[data-slide]')); 

// this does not work either outputting an empty jQuery object 
console.log($("[data-slide]")); 

en utilisant Firebug je peux voir que tous les attributs de diapositive de données, y compris leur valeur numérique sont correctement attaché aux li s et vous déconnecter:

$('.gallery li').each(function(index) { 
    console.log($(this).data()); 
}); 

sorties comme prévu:

Object { slide=1} 
Object { slide=2} 
Object { slide=3} 
Object { slide=4} 

Alors pourquoi DOE s le premier console.log ne fonctionne pas?

Answer 1

data ajoute des éléments au porte-données interne de jQuery, et non aux attributs data-. Ceux-ci sont lus dans structure jQuery data(), mais les valeurs insérées en utilisant jQuery ne sont pas réinjectées dans le DOM.

La meilleure façon d'imiter ce serait d'utiliser .filter():

// To replicate $('.gallery li[data-slide]') 
$('.gallery li').filter(function(){ 
    return (undefined !== $(this).data('slide')); 
}); 

---

Vous pouvez aussi le faire comme un sélecteur personnalisé:

$.expr[':'].hasData = function(obj, index, meta, stack) { 
    return (undefined !== $(obj).data(meta[3])); 
}; 

$('.gallery li:hasData(slide)'); // li elements under .gallery with "slide" data set 
$(':hasData(slide)'); // any element with "slide" data set