Question

所以我有这个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">？

Answer 1

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对象

Answer 2

fa-caret-down是panel的子项，最接近的是不选择那样的选择器，最接近的方法选择最近的父div。您可以改用find方法：

target = $(panel).find('.fa-caret-down');

Answer 3

您必须阅读.closest()的工作原理。

描述：对于集合中的每个元素，获取第一个元素通过测试元素本身并遍历来匹配选择器通过DOM树中的祖先。

您可以使用.find()：

$(panel).find('a.fa-caret-down');

Answer 4

.closest（）只向上移动，而不是向下移动。

您正在寻找的代码是：

target = $('.fa-caret-down',panel);

这相当于说＆＃34;在面板内寻找.fa-caret-down＆＃34;

jQuery - 选择$（this）中的元素不起作用

4 个答案: