jquery - jquery指定孩子和父母

Question

我遇到了一个问题，我的代码没有将父级识别为“ul”，而是将其视为类。孩子的影响比我认为的要广泛。

代码片段：

<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

您似乎认为这$("ul").parent(".northern")意味着找到其父级具有 class = Northern 的 UL。它的实际意思是找到所有 UL，然后找到所有具有 class = Northern 的父母。.parent()是一种 DOM 遍历方法，而不是过滤器。

你大概想要的是：

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

Answer 2

使用.closest()

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

我认为 OP 想要第三个 li 项目

小提琴演示

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