尝试返回父级时 .parents() 和 .closest() 的奇怪行为jQuery 中的元素 ID

Question

所以我有 2 个

容器，每个容器都有 id。它们内部是一个
• 元素列表。

第一个

是
。第二个是
。

每个

内都有一些标签，它们有一个名为 close 的 id（这是我用作选择器的链接），这将删除每个

代码>节点一旦点击。我试图定位每个

容器以查看它来自哪里。

我的 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");

它会提醒“coaches-list”我在

和

如果我将其更改为：

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

它具有与上面相同的行为，但改为提醒“players-list”。

因此，当使用closest()时，它返回第一个

id，但当使用parents()时，它返回最后一个
id。

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

Answer 1

这是预期的行为。

您应该使用：

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

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

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

Answer 2

这是因为您从点击处理程序运行该选择器，所以您应该使用它：

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

Answer 3

尝试使用此函数来获取父级：

var $currentId = $(this).parents().first();

我从未使用过 .closest() 函数，但根据 jQuery，您指定的应该可以工作。不管怎样，尝试一下并告诉我效果如何。

您还需要使其通过使用 $(this) 选择当前元素