jQuery 1.4.4：如何根據數據屬性值查找元素？

Question

我想這應該是一個很瑣碎的任務，但使用Firefox瀏覽器的Mac，3.6.12以下不工作：使用Firebug

// 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]")); 

我可以看到，所有的數據幻燈片屬性，包括他們的數值是正確連接到li S和註銷：

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

產出預期：

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

那麼，爲什麼美國能源部第一個console.log不工作？

Answer 1

data將項目添加到jQuery的內部數據持有者，而不是data-屬性。這些被讀取到 jQuery的data()結構，但使用jQuery插入的值不反饋到DOM。

模仿最簡單的方法將使用.filter()：

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

---

你也可以做到這一點作爲一個自定義選擇：

$.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