jQuery select img with src

Question

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.

Answer 1

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.