Q:

Target first element inside its parent

I'm having trouble targeting the first element inside a list item using :first.
<li data-id="321">
    <ul>
        <li data-id="380">
            <ul>
                <li data-id="385"></li>
            </ul>
        </li>
        <li data-id="382"></li>
    </ul>
</li>

$(".drop .position").click(function() {
    $this = $(this);
    $targetID = $(".box-cont.active ").closest("li.box").data("id");
    $childrenArray = new Array();
    if ($target.find("ul:first").find("li").length > 0) {
        $target.find("ul:first").find("li").each(function() {
            $this = $(this);
            $childrenArray.push($this.data("id"));
        });
        alert($childrenArray);
    } else {
        alert("no children");
    }

I'm only trying to target the children of the first ul inside 321. Instead, I'm adding 380, 382, and 385 to the array when I only want to add 380 and 382.

A:

It's gonna find all the li, indeed. What you want are direct descendants.
Either replace find by children or use "ul:first>li" as your jQuery selector

