我想知道哪些选择器可用于HTML5附带的这些数据属性.
以这段HTML为例:
<ul data-group="Companies">
<li data-company="Microsoft"></li>
<li data-company="Google"></li>
<li data-company ="Facebook"></li>
</ul>
是否有选择器:
data-company="Microsoft"下方"Companies"data-company!="Microsoft"下方"Companies"使用之间$.data和$.attr使用时的使用data-someAttribute有何不同？
我的理解是$.data存储在jQuery中$.cache,而不是DOM中.因此,如果我想$.cache用于数据存储,我应该使用$.data.如果我想添加HTML5数据属性,我应该使用$.attr("data-attribute", "myCoolValue").
我需要根据存储在元素.data()对象中的值来选择元素.至少,我想使用选择器选择顶级数据属性,可能是这样的:
$('a').data("category","music");
$('a:data(category=music)');
或者选择器可能采用常规属性选择器格式:
$('a[category=music]');
或者以属性格式,但使用说明符指示它在.data():
$('a[:category=music]');
我发现James Padolsey的实现看起来很简单,但很好.选择器格式化在该页面上显示的镜像方法.还有这个Sizzle补丁.
出于某种原因,我记得有一段时间回顾jQuery 1.4将包含对jquery .data()对象中值的选择器的支持.但是,现在我正在寻找它,我找不到它.也许这只是我看到的一个功能请求.是否有支持,我只是没有看到它？
理想情况下,我想使用点表示法支持data()中的子属性.像这样:
$('a').data("user",{name: {first:"Tom",last:"Smith"},username: "tomsmith"});
$('a[:user.name.first=Tom]');
我还想支持多个数据选择器,其中只找到具有所有指定数据选择器的元素.常规jquery多选择器执行OR操作.例如,$('a.big, a.small')选择a带有类big或标签的标签small.我正在寻找一个AND,也许是这样的:
$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');
最后,如果数据选择器上有比较运算符和正则表达式功能,那将会很棒.所以$(a[:artist.id>5000])可能.我意识到我可能会做很多这样的事情filter(),但是有一个简单的选择器格式会很好.
有什么解决方案可以做到这一点？Jame的Padolsey是目前最好的解决方案吗？我主要关注的是性能,还有子属性点符号和多数据选择器等额外功能.是否有其他实现支持这些内容或以某种方式更好？
这是一个简单的例子来说明行为:
给出这个html标记:
<div data-company="Microsoft"></div>
和这个jQuery代码(使用jQuery 1.5.1):
// read the data
alert($("div").data("company"));
// returns Microsoft <<< OK!
// set the data
$("div").data("company","Apple");
alert($("div").data("company"));
// returns Apple <<< OK!
// attribute selector
alert($("div[data-company='Apple']").length);
// returns 0 <<< WHY???
// attribute selector again
alert($("div[data-company='Microsoft']").length);
// returns 1 <<< WHY???
// set the attribute directly
$("div").attr("data-company","Apple");
alert($("div[data-company='Apple']").length);
// now returns 1 <<< OK!
由于jQuery自动将HTML5 data-*导入jQuery的数据对象,因此在数据更改时不应更新属性吗？
有人可以解释为什么这不起作用？
我要做的是更新一个被删除元素中名为'section_id'的数据属性,并将新部分放入其中.我在删除时检查这个数据属性,以便它们不能将它放入它已经存在的部分.所以很自然地,如果他们将它放在一个新的部分中,我希望更新部分ID.
我有一个这样的div:
<div class="draggable" data-section_id="413">...</div>
我正在追踪价值所做的事情:
alert(newTaskRow.find('.draggable').data('section_id')); //returns 413
newTaskRow.find('.draggable').data('section_id','999');
alert(newTaskRow.find('.draggable').data('section_id')); //returns 999
alert(newTaskRow.find('.draggable').html());
但HTML仍显示:
<div class="draggable" data-section_id="413">...</div>
为什么不在HTML中更新值？那我该怎么办？