0

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?

Improve this question
2
  • 1
    If you do var t = $(this).attr('data-to-shoot'); does it return the same thing. Commented Apr 18, 2014 at 19:56
  • I don't understand why the linked stackoverflow question doesn't help you, it is the normal way to do it. Maybe if you made a jsfiddle we could see why nothing is returned with your selector, but $('table#ct_ennemies_2 td[data-to-shoot=1]') as Kyle suggested should be working. Commented Apr 18, 2014 at 20:00

2 Answers 2

Reset to default
2

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 });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

It doesn't work (I've updated my question with samples tried)
@OlivierPons see my edit as well as Bill's answer for a solution.
You're right, your solution works with $('table#ct_ennemies_2 td').first().attr('data-to-shoot','1'); then get it with $('table#ct_ennemies_2 td[data-to-shoot="1"]')
1

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.

Improve this answer

2 Comments

It doesn't work (I've updated my question with samples tried)
+1 This is the correct answer since OP added the attribute via data('to-shoot', '1')

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.