Question

I’m on a project that requires me to extract certain <a> elements (can be in Object type) from a div container. By using JavaScript, I’m able to get all <a> objects from the div. But the problem is, I only want the objects in the “first level” of <ul>, not the ones contained in another <ul> within one of its <li>.

For example, in the code below, I only want AAA, BBB, CCC, DDD. Not CCC-sub1 nor CCC-sub2. How do I achieve this via javascript/jquery?

Help is highly appreciated! Thanks.

<div id="sampleList">

<ul>

<li>
<a href="a.html">AAA</a>
</li>

<li>
<a href="b.html">BBB</a>
</li>

<li>
<a href="c.html">CCC</a>

    <ul>
        <li>
        <a href="c-sub1.html">CCC-Sub1</a>
        </li>

        <li>
        <a href="c-sub2.html">CCC-Sub2</a>
        </li>
    </ul>

</li>


</li>
<a href="d.html">DDD</a>
</li>

</ul>

</div>

Answer 1

Since you tagged this jQuery:

$('#sampleList > ul > li > a');