jquery specify child and parent

Question

I am having a problem where my code is not recognizing the parent as "ul" and is instead seeing it as the class. The child has wider effects than I believe it should.

Segments of the code:

<script>
       $(document).ready(function(){
        $("div:last").click(function(){
            $("ul").parent(".northern").children(':nth-child(3)').hide();
            });
        });
    </script>

<section class="northern">
            <h2>US</h2>
            <ul>
                <li>Princeton</li>
                <li>Harvard</li>
                <li>Yale</li>

            </ul>
            <div>
                <input type="button" value="Click Me!">
            </div>
        </section>

Answer 1

You seem to think that $("ul").parent(".northern") means find the UL whose parent has class = northern. What it actually means is find all ULs, then find all their parents that have class = northern. .parent() is a DOM traversal method, not a filter.

What you presumably want is:

$(".northern > ul").children(':nth-child(3)').hide();

Answer 2

Use .closest()

$(document).ready(function () {
    $("div:last").click(function () {
        $("ul").closest(".northern").children(':nth-child(3)').hide();
    });
});

I think OP want 3rd li item

Fiddle DEMO

$(document).ready(function () {
    $("div:last").click(function () {
        $(".northern ul").children(':nth-child(3)').hide();
    });
});