CODEWITHSUNDEEP
javascriptjquery
Shibbir
Shibbir

Reputation: 2031

How to select element of click element parents using jQuery?

I have following HTML code and I am calling ajax using click event using this class .educacao_search.

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

now I on success I want to show result in show_result class.

To do this I am using collowing jQuery code but it seems not working! I mean the result is not showing in this class called show_result

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

Note: this is a bootstrap tabs and there are 5 tabs with same classes which is educacao_search and show_result

Update:

Ajax Call:

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

Upvotes: 1

Views: 85

Answers (1)

Karan
Karan

Reputation: 12619

Declare var obj = $(this); before .ajax and use it inside success callback.

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

It's important to know how this keyword works in javascript. Refer below links it will be helpful.

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

Upvotes: 3

Related Questions