-2

i got this table html: 

<table id="mytable">
<thead>
<tr role="row">
<th aria-controls="dog"></th>
<th aria-controls="cat"></th>
<th aria-controls="fish"></th>
</tr>
</thead>
</table>

and i want to select the th where the attribute is "dog".

i try this :

$("th").attr("aria-controls"="dog");

what is a god way to do it?
if i can i avoid looping on all the tr it will be even better.

thanks :)

sortof
  • 530
  • 1
  • 8
  • 18

2 Answers2

17

You can select elements by what an attribute's value is equal to like this:

var element = $('th[aria-controls="dog"]')

More info on attribute equals selector here: https://api.jquery.com/attribute-equals-selector/

As a side note the th is not even necessary or the attribute's value to test against. You can simply select all elements with that attribute regardless of its value too like this:

var element = $('[aria-controls]')

There are many ways of using this selector. You can even find elements with that attribute that start, end or contain the value.

Starts with: var element = $('[aria-controls|="dog"]') ex: dogggg

Ends with: var element = $('[aria-controls$="dog"]') ex: adog

Contains: var element = $('[aria-controls*="dog"]') ex: bdogb

Not equal: var element = $('[aria-controls!="dog"]') ex: cat

More info on attribute selectors in general here: https://api.jquery.com/category/selectors/attribute-selectors/

AtheistP3ace
  • 9,611
  • 12
  • 43
  • 43
  • The question is just about finding the link to the docs by googling the question name, really answering it?.. – nicael Jun 07 '16 at 17:01
  • Sure, i see what you mean. But they did show some code of what they attempted so was just helping. – AtheistP3ace Jun 07 '16 at 17:04
  • They did show no code, just a wild guess, I have no idea why did OP even include it in their code. But even if it's considered code - this question is not a question. It's just a specific article of documentation, which OP just didn't read. – nicael Jun 07 '16 at 17:04
2

The problem you have with:

$("th").attr("aria-controls"="dog");

Is primarily that it's a syntax error (Uncaught ReferenceError: Invalid left-hand side in assignment); this is because there are two uses for the attr() method, getting or setting a value.

If you provide one argument it's a getter, and returns the value of the given attribute:

$('th').attr('aria-controls');

Will then return the value of the aria-controls attribute from the first/only element returnd by the $('th') collection of elements.

To set an attribute to a given value:

$('th').attr('aria-controls', 'aria-controls new value');

Which will set the attribute-value of the aria-controls attribute to the supplied value of 'aria-controls new value' (the second argument to the method).

You'll note that neither of these approaches uses the assignment (=) operator.

To find an element via its given attribute, and attribute-value, you need to use the attribute-equals ([attribute=attribute-value]) selector syntax from CSS:

$('th[aria-controls=dog]');
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • What OP's doing is essentially trying to assign constant to constant in the function arguments, see it? Basically OP just didn't read about 1) functions 2) assignments; two basic things. Trying to explain it there? Any reason or aim? – nicael Jun 07 '16 at 17:11
  • 2
    I was simply trying to provide a specific answer to the OP's question despite closing it as a duplicate of another; this way hopefully s/he may learn something about why their own attempt failed *and* to search in future before asking a question. – David Thomas Jun 07 '16 at 17:13
  • As for searching in future - how does providing an answer help to search in future? The next time OP asks another similar question, gets the easy answer and doesn't even notice it's a dupe. – nicael Jun 07 '16 at 17:17
  • 1
    The provision of an answer specific to his/her problem was my choice - I don't feel the need to justify that to you - as for learning to search, that's an assumption based on the existence of a duplicate question, a question *this* question was closed as a duplicate-of within ten minutes. Maybe s/he will learn, maybe s/he won't. I don't see the loss of around two minutes as a significant waste, even if it was wholly wasted. – David Thomas Jun 07 '16 at 17:21