Javascript 如何使用jQuery选择click元素父元素？

我有以下HTML代码，我使用这个类

.educacao\u search

，使用click事件调用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>

注意：这是一个引导选项卡，有5个选项卡具有相同的类，分别是

educacao\u search

和

show\u result

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

更新：

$(".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");
        }
    });
});  

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");
        }
    });
});  

声明

var obj=$（此）.ajax

之前使用code>并在

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");
        }
    });
});  

了解

这个

关键字在javascript中的工作方式很重要。请参考以下链接，这将很有帮助

---

.parents（“.tab pane”）

确定要抓取所有家长吗？如果没有，请改用

.closest（.tab pane”）

。问题是在success函数中使用了“this”，解决方案是“context”参数。来自文档：

$.ajax（{url:test.html”，context:document.body}）.done（函数（）{$（this.addClass（“done”）；}）

您应该使用

上下文

参数来实现这一点，但是这个例子可能也适用。@Karan Awesome。这似乎是可行的，但为什么要创建var

obj

？@creativeartbd内部函数

success

的上下文与外部函数

click

的上下文不同，因此当您使用关键字

this

时，您引用了错误的对象。在更高级别的作用域中声明变量（如@karan示例中的

obj

）就是这样。当您在

success

回调中使用

this

时，它将引用不同的对象。所以我们可以在

ajax

之外声明它，并在ajax内部使用该对象。您可以在ajax调用之前尝试

console.log（this）

，并在

success

中尝试。你会发现这两个物体是不同的。太棒了。我现在明白了：=）