В каждом дочернем элементе отображаются данные

Question

Я создаю страницу, в которой, когда тег привязки щелкнет, он извлекает данные из URL-адреса, связанного с этим якорем. Я хочу, чтобы данные вытащили, чтобы отображать только в всплывающем окне div, связанном с этим якорем. Каждое всплывающее окно anchor и div-класса находится в родительском div с именем employee. Когда он щелкнет сейчас, он потянет данные, но к каждому всплывающему окну div на странице. Я пробовал .find и .children, но ни один из них не работает. Может кто-нибудь мне помочь?

(function($) { 
 

 

 
     function find_page_number(element) { 
 
     return parseInt(element.html()); 
 
     } 
 

 
     $('.leadership').on('click', function(event) { 
 
     event.preventDefault(); 
 

 
     page = find_page_number($(this).clone()); 
 

 
     var memberSrc = $(this).attr('href'); 
 

 
     $.ajax({ 
 

 
      url: memberSrc, 
 
      type: 'get', 
 
      dataType: 'html', 
 
      data: { 
 
      action: 'ajax_pagination', 
 
      query_vars: ajaxpagination.query_vars, 
 
      page: page 
 
      }, 
 
      success: function(html) { 
 
      $(".popup").empty(); 
 
      $('.popup').append($(html).find('.single-member').html()); 
 
      } 
 

 
     }); 
 

 

 
     }) 
 
    })(jQuery);

<div class="employee"> 
 
    
 
    <a class="leadership" href="different for each"> 
 
    
 
    <img src="#" /> 
 
    
 
    </a> 
 
    
 
    <div class="popup"></div> 
 
    
 
</div> 
 

 
<div class="employee"> 
 
    
 
    <a class="leadership" href="different for each"> 
 
    
 
    <img src="#" /> 
 
    
 
    </a> 
 
    
 
    <div class="popup"></div> 
 
    
 
</div>

Answer 1

Это потому, что вы используете селектор класса .popup и у вас есть несколько всплывающих окон на странице.

Чтобы получить ссылку на всплывающее окно, которое вы хотите, вы можете перейти к родительскому элементу и посмотреть всплывающее окно в элементе или посмотреть на братья и сестры .leadership.

Нечто подобное может работать:

$('.leadership').on('click', function(event) { 
    event.preventDefault(); 

    page = find_page_number($(this).clone()); 

    var memberSrc = $(this).attr('href'); 

    // Get a reference to your parent employee div 
    var parent = $(this).parent(); 

    $.ajax({ 

     url: memberSrc, 
     type: 'get', 
     dataType: 'html', 
     data: { 
     action: 'ajax_pagination', 
     query_vars: ajaxpagination.query_vars, 
     page: page 
     }, 
     success: function(html) { 
     var popup = parent.find(".popup"); 
     popup.empty(); 
     popup.append($(html).find('.single-member').html()); 
     } 
}); 

Answer 2

Я думаю, что это будет делать это для вас - вы должны быть ориентированы на ребенка всплывающую тег с .find()

$('.leadership').on('click', function(event) { 
    event.preventDefault(); 

    var $this = $(this).parent(); 
    ^^^^^^^^^^^^^^^^^^^^ 
    page = find_page_number($(this).clone()); 

    var memberSrc = $(this).attr('href'); 

    $.ajax({ 

     url: memberSrc, 
     type: 'get', 
     dataType: 'html', 
     data: { 
     action: 'ajax_pagination', 
     query_vars: ajaxpagination.query_vars, 
     page: page 
     }, 
     success: function(html) { 
     var popup = $this.find(".popup"); 
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
     popup.empty(); 
     popup.append($(html).find('.single-member').html()); 
     }