尝试<ul>在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>中点击关闭选择器时，它会提醒'coaches-list'

如果我把它改成:

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

它有相同的行为，但提醒'players-list'，而不是。

所以当使用close()时，它返回第一个<ul> id，但是当使用parents()时，它返回最后一个<ul> 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();

我从来没有使用过。close()函数，但根据jQuery你所指定的应该工作。不管怎样，试一试，然后告诉我结果如何。

您还需要使用$(this)