Is there a work around for this jQuery bug?

Question

$('> img[src="folderopen.gif"]',$scope)

The above will fail,seems a bug of jQuery,is there a work around?

This issue is found here:

http://stackoverflow.com/questions/2062381/how-to-judge-whether-there-is-a-specific-child-haschildtestatttest-wi/2062390#2062390

EDiT

I've just verified this will also fail:

$scope.children( 'img[src="folderopen.gif"]');

Answer 1

Tested, and Works:

Demo Online: http://jsbin.com/uyuri3

<p id="scope"> 
  <img src="foo.jpg" /> 
</p>

-- with --

$(function(){
  var scope = $("#scope");
  alert( $(scope).children("img[src$='foo.jpg']").attr("src") );
});

-- works with your original syntax too --

var img = $("> img[src$='foo.jpg']", scope);

---

An Interesting Bug

We know that our src value is foo.jpg, yet the following fails:

$("img[src='foo.jpg']");

So I was curious if jQuery's interpretation of the src would be equal to the string literal source I provided in the HTML:

$("img", scope).attr("src") === "foo.jpg"; // true

This makes the whole situation very strange. jQuery argues that the src value is NOT equal to "foo.jpg" when you pass it in as part of the selector, but it IS equal to the string literal when you compare from a call to attr().

In the end, $= is necessary to get jQuery to agree that "foo.jpg" is equal to "foo.jpg". This certainly is a bug, but not an insurmountable one.

Answer 2

You should just do:

$(scope).children("img[src='folderopen.gif']");

From that expression I assume you're doing some kind of tree like structure (like Windows Explorer). If so, I'd strongly urge you to instead use classes as markers rather than using attribute selectors, which are slow on most browsers. For example, with this CSS:

ul.tree li { background: url(folderclosed.gif); }
ul.tree li.open { background: url(folderopen.gif); }

you'd then do:

$(scope).children("li.open")...

which will be much faster.