javascript - 尝试在 jQuery 中返回父 元素 id 时，.parents() 和 .closest() 的奇怪行为

Question

所以我有 2 <ul>每个容器都有 id。其中包含 <li> 的列表。元素。

第一个<ul>是 <ul id="coaches-list"> 。第二个是<ul id="players-list"> .

每个 <li> 内都有标签有一个名为 close 的 id(这是我用作选择器的链接)，它将删除每个 <li>节点一旦被点击。我正在尝试针对每个 <ul>容器以查看它来自哪里。

我的 HTML 是:

                <!-- coaches box -->
                <div class="box">
                    <div class="heading">
                        <h3 id="coaches-heading">Coaches</h3>
                        <a id="coaches" class="filter-align-right">clear all</a>
                    </div>
                    <ul id="coaches-list" class="list">
                        <li><span>Hue Jackson<a class="close"></a></span></li>
                        <li class="red"><span>Steve Mariuchi<a class="close"></a>                     </span></li>
                    </ul>
                </div>

                <!-- players box -->
                <div class="box">
                    <div class="heading">
                        <h3 id="players-heading">Players</h3>
                        <a id="players" class="filter-align-right">clear all</a>
                    </div>
                    <ul id="players-list" class="list">
                        <li><span>Steve Young<a class="close"></a></span></li>
                        <li><span>Gary Plummer<a class="close"></a></span></li>
                        <li><span>Jerry Rice<a class="close"></a></span></li>
                    </ul>
                </div>

我在 jQuery 中的删除标签函数是:

function removeSingleTag() {
    $(".close").click(function() {

                    var $currentId = $(".close").closest("ul").attr("id");
                    alert($currentId);

        // find the closest li element and remove it
        $(this).closest("li").fadeOut("normal", function() {
            $(this).remove();
            return;
        });
    });
}

每当我点击每个特定标签时，它都会删除我点击的正确标签，尽管当我警告 $currentId 时，如果我有:

            var $currentId = $(".close").closest("ul").attr("id");

当我单击 <ul id="coaches-list" class="list"></ul> 中的关闭选择器时，它会提醒“教练列表”和<ul id="players-list" class="list"></ul>

如果我将其更改为:

            var $currentId = $(".close").parents("ul").attr("id");

它的行为与上面相同，但会提醒“玩家列表”。

所以当使用closest()时，它返回第一个<ul> id，但是当使用parents()时，它返回最后一个<ul> id。

有人知道这种奇怪的行为是怎么回事吗？

Answer 1

这是预期的行为。

您应该使用:

var $currentId = $(this).closest("ul").attr("id");

$(this) 指向点击的.close。

$(".close") 指向找到的第一个。