Question

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

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.