.parents()和.close()在尝试返回parent <ul>jQuery中的元素id

Weird behavior with .parents() and .closest() when trying to return parent <ul> element id in jQuery

本文关键字:ul jQuery id 元素 parent close parents 返回      更新时间:2023-09-26

所以我有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。

有人知道这古怪的行为是怎么回事吗?

这是预期的行为。

你应该使用:

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

$(this)指向点击的.close

$(".close")分第一个发现

因为你从点击处理程序运行选择器你应该使用这个代替:

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

尝试使用这个函数获取父元素:

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

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

您还需要使用$(this)

来选择当前元素