Question

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

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

每个<li>中都有一个标签名为close（这是我用作我的选择器的链接），它会在点击后删除每个<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'，而不是。

所以当使用nearest（）时，它会返回第一个<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();

我从未使用过.closest（）函数，但是根据jQuery，你指定的内容应该可行。无论哪种方式，试试并告诉我它是怎么回事。

您还需要使用它来使用$（this）

选择当前元素

尝试在jQuery中返回父<ul>元素id时，.parents（）和.closest（）的奇怪行为</ul>

3 个答案: