jquery-selectors - dataattribute基于jquery如何查找一个元素值?

  显示原文与译文双语对照的内容

我有以下场景:


var el = 'li';

页面上有 5个 <li>,每个页面有一个 data-slide=number 属性 ( 数字分别为 1,2,3,4,5 ) 。

我现在需要找到当前活动的幻灯片编号,它映射到 var current = $('ul').data(current); 并在每张幻灯片更改上更新。

到目前为止,我的尝试是不成功的,试图构造与当前幻灯片相匹配的选择器:


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

不匹配/返回任何内容。。

我不能硬编码 li 部分的原因是,这是一个可以访问的变量,可以在需要时改成其他元素,所以它可能不是一个 li

关于我缺少什么的想法?

时间:

你必须将 current的值注入属性等于选择器:


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

如果你不想键入所有内容,下面是通过数据属性进行查询的较短方法:


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

参考:http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/web

[data-x=...] 在搜索时,要注意了,它的不适用于 jQuery.data(..) 设置器:


$('<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

你可以使用这里选项:


$.fn.filterByData = function(prop, val) {
 return this.filter(
 function() { return $(this).data(prop)==val; }
 );
}

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

我改进了扩展的filterByData到 jQuery 。

以前的扩展在key-value对上搜索,使用这里扩展可以另外搜索数据属性的存在,而不管它的值是什么。


(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);

使用方法:


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

请参见Fiddle以获得更好的示例: http://jsfiddle.net/pratik136/PTqmE/

回到最初的问题,关于如何在不事先了解元素类型的情况下进行这项工作,下面执行以下操作:


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

在使用jQuery和data-*属性获取元素时遇到同样的问题。

你可以参考下面的代码:

这是我的HTML代码:


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

这是我的jQuery选择器:


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

...