inner span is not getting ref in jQuery.Why?

Question

Dear All, I have one html structure:

enter code here <ul>
    <li><span>aaa</span>
        <div>
            <ul>
                <li><span>bbb</span> </li>
            </ul>
        </div>
    </li>
    <li><span>ccc</span>
        <div>
            <ul>
                <li><span>ddd</span> </li>
            </ul>
        </div>
    </li>
</ul>

now what should be the exact code to access

 <span>aaa</span>and <span>ccc</span>

but not span with bbb and ddd...I have used $("li span:first-child") and its working fine..is it rite I mean as per standard...bcoz I think it should ref every first child span under any li inside that html file....what should be the exact code?

Answer 1

This maybe because you are nesting li without ol/ul, li should be inside ol/ul not inside another li

Answer 2

Your HTML is not well formed. li elements aren't closed. This could be causing the problem.

Answer 3

Pay a visit to http://validator.w3.org/. Browsers do amazing things in trying to build a DOM from illegal markup, but the results are often not what you expect and inconsistent across browsers.

Use correct markup — then worry about tools dealing with it in unexpected ways. See GIGO.

Answer 4

So you want all the <span>s which are a direct child of an <li> which has a nested list inside it? Here's my go at it:

$("li:has(ul) > span")

Explanation, step by step:

li        // find all <li>s
:has(     // which have inside them
  ul      // a <ul> tag
)         // (current context is still at the <li>
>         // now find just immediate children (not grandchildren, etc)
span      // ..which are spans

The result set should now be a list of <span>s whose parent is an <li> which has a <ul> descendant.