jQuery使用另一个var定位特定的div

Question

So, I have the following php and js markup:

<div class="top" data-id="<?php echo $id; ?>">
  <div class="middle">
    Click
  </div>
  <div class="info"> <!--Note that I am targeting a child div -->
     <div class="name">
       Steve
     </div> 
  </div>     
</div>

Then for my js:

jQuery(document).on( 'click', '.middle', function(e) {
  var my_id= jQuery(this).parent('.top').data("id");
});

At this point, when the middle div is clicked, the js var my_id is equal to the data_id of its top parent div (with .top).

Now, I want to save another div as below (simple html).

var my_name = $('.name').html();

How do I target the specific .name class within the specific `data-id' div?

Answer 1

You could use the .siblings() method to select all the sibling elements of .middle, and then use .find() to find any descendant .name elements:

jQuery(document).on( 'click', '.middle', function(e) {
  var my_id= jQuery(this).parent('.top').data("id");
  var my_name = jQuery(this).siblings().find('.name').html();
});