Question

I’ve seen similar questions asked here many times but this one’s a bit different.
I have a post query displays content as;

<div class="block1">
<a class="button" href="#">Button</a>
<div class="wholiked">content</div>
</div>
<div class="block2">
<a class="button" href="#">Button</a>
<div class="wholiked">content</div>
</div>

I was trying to reload the .wholiked in .block1 upon the click of button in .block1 without refreshing the page.
But in this case all the .wholiked content inside all blocks reload instead of that specific one.

$(function() {
      $('.button').click(function(evt) {
         $('.wholiked').load('index.php .wholiked');
         evt.preventDefault();
      })
    });

How can I limit it to act only inside that specific block that the button resides?

Answer 1

Your selector ‘.wholiked’ is loading all elements with that class. Assuming you want the one right next to the button clicked, use:

$(this).next('.wholiked').load('index.php');

If you can’t guarantee the siblign relationship, you need to define a unique relationship somehow. One example would be to use a common parent class on the parent div like so:

<div class="block1 block">
    <a class="button" href="#">Button</a>
    <div class="wholiked">content</div>
</div>
<div class="block2 block">
    <a class="button" href="#">Button</a>
    <div class="wholiked">content</div>
</div>

The JS would then be:

$(this).closest('div.block').find('.wholiked').load('index.php');

Or you could put a data attribute on the button to target the element:

<div class="block1">
    <a class="button" data-contentselector="#content1" href="#">Button</a>
    <div id="content1" class="wholiked">content</div>
</div>

JS:

$($(this).data('contentselector')).load('index.php');