.parents()和.close()在尝试返回parent <ul>jQuery中的元素id
Weird behavior with .parents() and .closest() when trying to return parent <ul> element id in jQuery
所以我有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)
相关文章:
- 使用jquery动态创建ul-li
- 在JQuery中隐藏和显示ul中的特定元素
- 使用 jquery 获取外部父 UL
- jQuery(“ul.sf菜单”).superfish不是一个函数
- 在jQuery UI中获取ul和li值,拖放即可排序
- JQuery Mobile UL列表仍然不能用于动态列表
- HTML/jQuery点击显示/隐藏ul
- jQuery复选框(在ul>li下)检查事件
- Jquery将css类添加到父级<ul>元素
- jQuery对嵌套在<李>并且<a>元素,同时离开父<ul>打开
- jQuery SlideDown仅当单击另一个“ul”时
- 加载更多li's在ul-JQuery中
- jquery onclick 切换最接近的 UL
- 如何在 ul 标签下执行 JQuery UI 自动完成
- jQuery使用XML数据更新UL列表
- 使用jquery在ul菜单中添加li dynamic
- 结合导航UL jQuery功能
- 添加动态数据到UL jquery移动的问题
- UL内部UL JQuery问题
- 从 UL jquery 中删除一个(不带 id)元素