Reputation: 293
I want to select an image (with jQuery) by the src attribute. The Image is inside an ul and a collection of div's. The id of the ul is "sortable".
Here is my HTML:
<ul id="sortable">
<li id="pic_0">
<div class="sortEleWrapper">
<div class="imgWrapper">
<img src="/test1.jpg">
</div>
<input type="text" name="picText" id="picText" value="""" style="width:105px;color:#aaa" class="sortInput">
</div>
<input type="hidden" id="picSrc" name="picSrc" value="/test1.jpg">
</li>
</ul>
etc.
and here is my js:
if($('#sortable').find('img[src="/test1.jpg"]').length > 0){
alert('img exists');
}else{
alert('img doesnt exists');
}
My problem is, that they don't find any image. But if I write the js like this:
if($('img[src="/test1.jpg"]').length > 0){
alert('img exists');
}else{
alert('img doesnt exists');
}
so they find the image.
Upvotes: 29
Views: 54795
Reputation: 322492
I'm not sure why the difference, but try using the $=
attribute ends with selector.
Seems to work.
Example: http://jsfiddle.net/bTf7K/
$('#sortable').find('img[src$="/test1.jpg"]')
EDIT: The difference may have something to do with the method of getting the attribute value that jQuery uses at different times.
Using native methods:
element.getAttribute("src") // returns the actual value that was set
element.src // returns the value but with the full domain path
So I'm guessing jQuery uses both of these at different times.
Upvotes: 35