Getting contents by jQuery closest

Question

I've problem with using jQuery's closest() . When I want to print an example, like the d variable, I get undefined error.

 $(".eb").click(function() { var d = $(this).closest(".contact-info"); var t = $(this).closest(".contact-tell"); var n = $(this).closest(".contact-name"); var i = $(this).closest(".contact-id"); console.log(d.html()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="contact-id"> <?php echo $value[0]; ?> </td> <td class="contact-name"> <?php echo $value[1]; ?> </td> <td class="contact-tell"> <?php echo $value[2]; ?> </td> <td class="contact-info"> <?php echo $value[3]; ?> </td> <td class="td-actions"> <a href="?IDD=<?php echo $value[0]." &owner=".$_SESSION['username'];?>"> <i class="glyphicon glyphicon-trash"></i> </a> <a href="#" class="eb" data-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg"> <i class="glyphicon glyphicon-edit"></i> </a> </td> </tr> </table> 

Answer 1

closest() only looks at ancestors. .contact-info is not an ancestor of .eb .

Look for the closest tr (the nearest common ancestor) then search within:

var d=$(this).closest("tr").find(".contact-info")

A slightly more efficient way...

 $(".eb").click(function() { var $ancestor = $(this).closest("tr"); // Cache 'tr' so we don't have to look it up every time var d = $ancestor.find(".contact-info"); var t = $ancestor.find(".contact-tell"); var n = $ancestor.find(".contact-name"); var i = $ancestor.find(".contact-id"); console.log(d.html()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="contact-id"> echo $value[0]; </td> <td class="contact-name"> echo $value[1]; </td> <td class="contact-tell"> echo $value[2]; </td> <td class="contact-info"> echo $value[3]; </td> <td class="td-actions"> <a href="#"> <i class="glyphicon glyphicon-trash"></i> </a> <a href="#" class="eb" data-uid="#" data-toggle="modal" data-target=".bs-example-modal-lg"> BUTTON <i class="glyphicon glyphicon-edit"></i> </a> </td> </tr> </table> 

Answer 2

A slightly different approach could be traversing to the parent and select the siblings :

 $(".eb").click(function() { var $parent = $(this).parent(); var d = $parent.siblings(".contact-info"); var t = $parent.siblings(".contact-tell"); var n = $parent.siblings(".contact-name"); var i = $parent.siblings(".contact-id"); console.log(d.html()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="contact-id"> Id </td> <td class="contact-name"> Name </td> <td class="contact-tell"> Tell </td> <td class="contact-info"> Info </td> <td class="td-actions"> <a href="?IDD=<?php echo $value[0]." &owner=".$_SESSION['username'];?>"> <i class="glyphicon glyphicon-trash"></i> </a> <a href="#" class="eb" data-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg"> Click me! </a> </td> </tr> </table> 

Answer 3

The issue is because closest() looks directly up the DOM tree, and the elements you're searching for are not parents of the .eb element; they are siblings of it's grandparent. To fix this use closest() to get a common ancestor, then find() . Try this:

 $(".eb").click(function() { var $row = $(this).closest('tr'); var d = $row.find(".contact-info"); var t = $row.find(".contact-tell"); var n = $row.find(".contact-name"); var i = $row.find(".contact-id"); console.log(d.html()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="contact-id"> contact-id </td> <td class="contact-name"> contact-name </td> <td class="contact-tell"> contact-tell </td> <td class="contact-info"> contact-info </td> <td class="td-actions"> <a href="?IDD=<?php echo $value[0]." &owner=".$_SESSION['username'];?>"> <i class="glyphicon glyphicon-trash">Delete</i> </a> <a href="#" class="eb" data-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg"> <i class="glyphicon glyphicon-edit">Edit</i> </a> </td> </tr> </table> 

Answer 4

if you want to use jQuery functions then you should use variable as jQuery object as below

 var i = $parent.siblings(".contact-id");
  console.log($(d).html());