Question

Code and Testcase at jsbin

Basically, $("#div-pmdialog span") seems to select all SPANs on the page, whereas my understanding was that it should find only those SPANs which are descendants of $("#div-pmdialog"). What am I doing wrong?

Answer 1

Your HTML isn’t parsed as you expect. The DOM inspector says it gets parsed as:

<div id="div-pmdialog">
    <p><span>hello</span></p><div id="div-pmdialog-text"><p></p>
  </div>

  <div id="div-indypcs-error"><span style="background-color:green">hello</span></div>    
</div>

HTML isn’t XML. In HTML4 and older, self-closing tags was a no-op, mostly because browsers simply ignored the slash. I believe HTML5 specifies that some tags may be “self-closed”, but only those that may never have any content, like <img> or <br>.