CODEWITHSUNDEEP
jquery
Olivier Pons
Olivier Pons

Reputation: 15778

jQuery how to find an element based on a data-attribute value (v2)?

I've read this, so this is not a duplicate. All the solutions proposed don't work jQuery how to find an element based on a data-attribute value?

Here's what I'm doing on the console of Chrome:

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

Then I get a result: one cell is marked with data('to-shoot') = 1. Great. Now if I try to find by data attribute like this:

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

I get an empty result:

[]

Same if I try

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

I get an empty result:

[]

Here's what you can do on the console log of 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
[]

My question is: how to apply properly a filter that returns the expected td which contains the data to-shoot=1?

Upvotes: 0

Views: 239

Answers (2)

Kyle
Kyle

Reputation: 22258

data attributes begin with data-

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

Note: this only works if you manually added the data attribute in the markup or via attr('data-to-shoot', 1). If it was applied via data('to-shoot', 1) you will need to use Bills' answer.

example fiddle

Fiddle contents:

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

Upvotes: 2

Bill Criswell
Bill Criswell

Reputation: 32921

I would use filter since .data does not apply the data to an actual attribute, but an inner hash table.

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

Also, pet peeve, the table before your id selector isn't needed.

Upvotes: 1

Related Questions