How to select current element by class inside in jQuery?

Question

I have a loop that dynamically populates information.

<div class="main">

 <div class="more">
    more
 </div>
 <span></span>
   ....
 <div class="more">
    more
 </div>
 <span></span>

</div>

on clicking specific div I am calling "ajax" - on success I want to override that specific div's content and next span with some content.

   $(document).on("click", ".more", function (event) {
            $.ajax({
                url: '..',
                datatype: 'application/json',
                success: function (data) {
                    $(".more",this).html("Update Dev"); //update div
                    $(".more",this).find('span:first').text("Update Span"); //update span 
                },
                error: function () { alert('something bad happened'); }
            });
        });

How would I access the element that was clicked.

Thanks

$(this) is what you need.

Ajay Pal
– Ajay Pal

2016-10-08 06:17:00 +00:00
Commented Oct 8, 2016 at 6:17 — Ajay Pal
– Ajay Pal, Commented Oct 8, 2016 at 6:17
duplicate of stackoverflow.com/questions/2643798/…

Shantaram Tupe
– Shantaram Tupe

2016-10-08 06:19:50 +00:00
Commented Oct 8, 2016 at 6:19 — Shantaram Tupe
– Shantaram Tupe, Commented Oct 8, 2016 at 6:19

krivtom · Accepted Answer · 2016-10-08 06:34:12Z

2

You can use $(this) inside click handler to get the clicked button. Make sure to capture it in click handler, not in AJAX callback:

$(document).on("click", ".more", function (event) {
    var clickedDiv = $(this);  // <- capture clicked div to variable

    $.ajax({
        url: '..',
        datatype: 'application/json',
        success: function (data) {
            // use captured div to set the contents
            clickedDiv.html("Update Dev");
            // use captured div and function next() to get the span element
            clickedDiv.next('span').html("Updated span");  // then update span
        },
        error: function () { alert('something bad happened'); }
    });
});

edited Oct 8, 2016 at 6:34

answered Oct 8, 2016 at 6:16

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Over a year ago

thanks so much for the explanation. The span would not update. I modified by ` clickedDiv.next('span').html("Updated span");` and it worked.

krivtom Over a year ago

@Ben Yes, you are right - I copied selector from the div and I did not notice that span does not have more class. I updated the answer

Ben Over a year ago

I was wondering is it easy to add .animate for example when div is changing? I know I didn't specify in my question, is it something simple to add?

Collectives™ on Stack Overflow

How to select current element by class inside in jQuery?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related