所以我有这个HTML代码
<section class="panel">
<header class="panel-heading" id="tills">
<div class="panel-actions">
<a href="#" class="fa fa-caret-down"></a>
</div>
<h2 class="panel-title">Tills</h2>
</header>
<div class="panel-body">
<div class="app-next"><button>Next</button></div>
</div>
</section>
我正在尝试更改<a>
中的<div class="panel-actions">
类。
$(".panel").on("click", '.app-next button', function(){
var panel;
var target;
panel = $(this).closest('.panel');
target = $(panel).closest('.fa-caret-down');
console.log(panel); //Returns OK.
console.log(target); //Returns <button>
});
为什么console.log(target)
没有返回<a href="#" class="fa fa-caret-down">
?
答案 0 :(得分:2)
closest()
在DOM树中查找祖先,但您想查找.panel
使用find()
寻找后代。
$(".panel").on("click", '.app-next button', function(){
var $panel =$(this).closest('.panel');
var $target = $panel.find('.fa-caret-down');
console.log($target); //Returns <button>
});
请注意,在$()
中包装现有的jQuery对象是多余且低效的。在您的代码中panel
已经是一个可以使用jQuery方法的jQuery对象
答案 1 :(得分:0)
fa-caret-down
是panel
的子项,最接近的是不选择那样的选择器,最接近的方法选择最近的父div。您可以改用find方法:
target = $(panel).find('.fa-caret-down');
答案 2 :(得分:0)
您必须阅读.closest()的工作原理。
描述:对于集合中的每个元素,获取第一个元素 通过测试元素本身并遍历来匹配选择器 通过DOM树中的祖先。
您可以使用.find():
$(panel).find('a.fa-caret-down');
答案 3 :(得分:0)
.closest()只向上移动,而不是向下移动。
您正在寻找的代码是:
target = $('.fa-caret-down',panel);
这相当于说&#34;在面板内寻找.fa-caret-down&#34;