jQuery 1.4.4:如何根据数据属性值查找元素?

前端之家收集整理的这篇文章主要介绍了jQuery 1.4.4:如何根据数据属性值查找元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想这应该是一个非常简单的任务,但使用Firefox for Mac,3.6.12以下不起作用:
// 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]"));

使用Firebug我可以看到所有数据幻灯片属性(包括它们的数值)都正确地附加到lis并注销:

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

按预期输出

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

那么为什么第一个console.log不起作用?

解决方法

数据将项添加到jQuery的内部数据持有者,而不是数据属性.这些被读入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
原文链接:https://www.f2er.com/jquery/175680.html

猜你在找的jQuery相关文章