jQuery如何根据数据属性值(v2)查找元素?

时间:2014-04-18 19:50:49

标签: jquery

我读过这篇文章,所以这不是重复的。提议的所有解决方案都不起作用jQuery how to find an element based on a data-attribute value?

以下是我在Chrome控制台上所做的事情:

$('table#ct_ennemies_2 td').each(function() {
    var t=$(this).data('to-shoot'); console.log(t == "1")
});

然后我得到一个结果:一个单元格标有data('to-shoot') = 1。大。现在,如果我尝试通过这样的数据属性找到:

$('table#ct_ennemies_2 td[to-shoot="1"]').each(function() {
    console.log($(this))
});

我得到一个空的结果:

[]

如果我尝试

$('table#ct_ennemies_2 td[to-shoot=1]').each(function() {
    console.log($(this))
});

我得到一个空的结果:

[]

以下是您在Chrome控制台日志中可以执行的操作:

>> $('table#ct_ennemies_2 td').first().data('to-shoot','1');
[<td ...blablah >@</td>]
>> $('table#ct_ennemies_2 td').first().data();
Object {toShoot: "1"}
>> $('table#ct_ennemies_2 td').first().data('to-shoot');
"1"
>> $('table#ct_ennemies_2 td[to-shoot="1"]');
[]
>> $('table#ct_ennemies_2 td[to-shoot]');
[]
>> $('table#ct_ennemies_2 td[data-to-shoot]').each(function() { console.log($(this)) });
[]
>> $('table#ct_ennemies_2 td[data-to-shoot=1]').each(function() { console.log($(this)) });
[]
>> $('table#ct_ennemies_2 td[data-to-shoot="1"]').each(function() { console.log($(this)) });
[]
>> $('table#ct_ennemies_2 td[data-toShoot="1"]').each(function() { console.log($(this)) });
[]
>> $('table#ct_ennemies_2 td[toShoot="1"]').each(function() { console.log($(this)) });
[]
>> $('table#ct_ennemies_2 td[toShoot=1]').each(function() { console.log($(this)) });
[]
>> td = $('#ct_ennemies_2 td').filter(function() {
>>   return $(this).data('to-shoot') === 1;
>> });
[]
>> td
[]

我的问题是:如何正确应用返回包含数据td的预期to-shoot=1的过滤器?

2 个答案:

答案 0 :(得分:2)

data属性以data-

开头
$('table#ct_ennemies_2 td[data-to-shoot=1]')

注意:仅当您在标记中或通过attr('data-to-shoot', 1)手动添加数据属性时,此功能才有效。如果是通过data('to-shoot', 1)应用的,则需要使用Bills'回答。

example fiddle

小提琴内容:

<div class="test"></div>

$(function(){
  var d = $('div.test');

  d.data('to-shoot', 1);

  alert($('div[data-to-shoot=1]').length); // 0

  d.attr('data-to-shoot', 1);

  alert($('div[data-to-shoot=1]').length); // 1

  var divs = $('div').filter(function(){
    return $(this).data('to-shoot') == 1; 
  });

  alert(divs.length); // 1
});

答案 1 :(得分:1)

我会使用filter,因为.data不会将数据应用于实际属性,而是应用内部哈希表。

var $td = $('#ct_ennemies_2 td').filter(function() {
  return $(this).data('to-shoot') === 1;
});

另外,不需要table选择器之前的id