javascript - 如何使用 jQuery 选择点击元素父元素？

Question

我有以下 HTML 代码，我正在使用此类 .educacao_search 使用点击事件调用 ajax。

<div class="tab-pane active" id="tab-educacao">
    <br>
    <div class="row">
        <div class="col-md-12">
            <h4>EucaÇÃo</h4>
            <ul class="list-inline three">
                <li><a class="educacao_search" data-slug="ension">Ensino</a></li>
                <li><a class="educacao_search" data-slug="enem">ENEM</a></li>
                <li><a class="educacao_search" data-slug="escolas">Escolas</a></li>
                <li><a class="educacao_search" data-slug="lingua-e-linguagens">Lingua e Linguagens</a></li>
                <li><a class="educacao_search" data-slug="historia">História</a></li>
                <li><a class="educacao_search" data-slug="todos">Todos</a></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group has-feedback has-search">
                <input type="text" class="form-control" placeholder="Search" id="do_search_educacao">
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </div>
    </div>
    <br>
    <div class="row"><div class="show_result"></div><br></div>
</div>

现在我成功了，我想在 show_result 类中显示结果。

为此，我使用了 collowing jQuery 代码，但它似乎不起作用!我的意思是结果没有显示在名为 show_result

的类中

$(this).parents(".tab-pane").find(".show_result").html(result);

注意:这是一个引导选项卡，有 5 个选项卡具有相同的类，即 educacao_search 和 show_result

更新:

Ajax 调用:

$(".educacao_search").click(function () {                        
    var slug = $(this).data('slug');
    $.ajax({
        type: 'POST',
        url: urls.ajax_url,
        data: {
            'slug': slug,
            'action': 'get_post_content'
        }, success: function (result) {
            $(this).parents(".tab-pane").find(".show_result").html(result);
            //$(this).find(".show_result").html(result);
        },
        error: function () {
            alert("error");
        }
    });
});  

Answer 1

在 .ajax 之前声明 var obj = $(this); 并在 success 回调中使用它。

$(".educacao_search").click(function () {                        
    var slug = $(this).data('slug');
    var obj = $(this);
    $.ajax({
        type: 'POST',
        url: urls.ajax_url,
        data: {
            'slug': slug,
            'action': 'get_post_content'
        }, success: function (result) {
            obj.parents(".tab-pane").find(".show_result").html(result);
            //$(this).find(".show_result").html(result);
        },
        error: function () {
            alert("error");
        }
    });
});  

了解 this 关键字在 javascript 中的工作原理很重要。请参阅以下链接，这将有所帮助。

1. > https://javascript.info/object-methods
2. > https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c