jquery parsing custom tags strangely

Question

I'm having problems with the following: http://jsfiddle.net/x55LD/1/

I'm trying to parse custom tags using jQuery 1.6. It's working properly, except when a tag is located within a <select> tag. For example:

var string = '<div><blah></blah><select><blah></blah></select></div>';

$(string).find('blah').each(function() {
    console.log("Found tag!");
});

This will only log one message, despite the presence of two <blah> tags. The second <blah> tag within the <select> won't be recognized. Does anyone know why this might be happening?

Answer 1

The problem is that it's not JavaScript or jQuery that does the parsing, it's the browser. Though you may consider that <select> tag to be your own custom deal, the browser disagrees and expects it to contain only <option> or <optgroup> tags.

When you wrap the string up via jQuery like that, what's happening internally is that jQuery is handing the string over to the browser as the "innerHTML" of a temporary element. The browser expects that it's got HTML to work on, so when it sees illegal markup it handles it basically however it wants to. Maybe some browsers would leave the <blah> tag alone, but others won't.