I need to find all elements that has a special attribute value.
Here is the div I need to find (I have many of them..)
<div imageId='imageN'>...
I simply need to loop through the divs which have imageId='imageN'
5 Answers
Although it doesn't precisely answer the question, I landed here when searching for a way to get the collection of elements (potentially different tag names) that simply had a given attribute name (without filtering by attribute value). I found that the following worked well for me:
$("*[attr-name]")
Update: It appears that the asterisk is not required, i.e. based on some basic tests, the following seems to be equivalent to the above (thanks to Matt for pointing this out):
$("[attr-name]")
6 Comments
Paulius Matulionis
Perfect! Just what I was looking for.
sammy34
Quite possibly...I didn't check the performance aspect (wasn't an important factor for my use at the time).
Matt
Is there any difference between that and
$("[attr-name]")? (i.e. no *)
Oguz Karadenizli
Yes there is certain difference between them. star notation raise error on firefox!!!! (Unescaped ...)
MeltingDog
adding to this, you can also include an attributes value, eg:
$("[data-toggle='modal']") |
$('div[imageId="imageN"]').each(function() {
// `this` is the div
});
To check for the sole existence of the attribute, no matter which value, you could use ths selector instead: $('div[imageId]')
4 Comments
Developer
@ThiefMaster - If the attribute value is not constant, (i.e it will vary) then how to find it?
dsdsdsdsd
a couple of questions: 1- what about other elements ... 2- what about other values ... I might have the attribute data-food on many elements: div's, img's and a td's, where each has a different value.
Kama
@ParthoGanguly You use a variable this way: $('div[imageId="' + variableName + '"]')
Johann
This solution doesn't really answer the title of this page. You are searching for elements that are divs. A proper solution is one that is agnostic of the actual element.
It's not called a tag; what you're looking for is called an html attribute.
$('div[imageId="imageN"]').each(function(i,el){
$(el).html('changes');
//do what ever you wish to this object :)
});
1 Comment
Tim Bogdanov
how would you go about finding the inverse?
You can use partial value of an attribute to detect a DOM element using (^) sign. For example you have divs like this:
<div id="abc_1"></div>
<div id="abc_2"></div>
<div id="xyz_3"></div>
<div id="xyz_4"></div>...
You can use the code:
var abc = $('div[id^=abc]')
This will return a DOM array of divs which have id starting with abc:
<div id="abc_1"></div>
<div id="abc_2"></div>
Here is the demo: http://jsfiddle.net/mCuWS/
Comments
Use string concatenation. Try this:
$('div[imageId="'+imageN +'"]').each(function() {
$(this);
});
class="imageN"for the sake of valid HTML. Either that ordata-imageId="imageN"for the sake of valid HTML5. With the former, you'd be able to use the class selector.class="image imageN"if that helps.