Select a td element using Jquery

Question

I would like to go through my table's 'td's, and check for a data attribute and do something according to that attribute. I did this:

<li id="person1" data-city="Boston, New York, San Fransisco">
    Person name 1
</li>
<li id="person1" data-city="down, Washington">
    Person name 2
</li>
<td data-city="down"> TEST </td>

$('li[data-city*="down"]').css('color','red');​

http://jsfiddle.net/fR8rJ/3/

but I can't make it work for the 'td' element.

any ideas?

Answer 1

You can't have an orphan td , it's not valid HTML, and jQuery will not allow you to select it. It needs to be inside a tr , which itself needs to be inside a table element:

<table>
  <tr>
    <td data-city="down"> TEST </td>
  </tr>
</table>

Only then you can execute $('td[data-city*="down"]').css('color','red'); .

DEMO .