通过jQuery获取内容最接近

Question

我在使用jQuery的closest() 。 当我想打印一个示例（如d变量）时，出现未定义的错误。

 $(".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()只看祖先。 .contact-info不是.eb的祖先。

寻找最接近的tr （最接近的共同祖先），然后在以下位置搜索：

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

一种更有效的方法...

 $(".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

一种稍微不同的方法可以遍历到parent并选择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

问题是因为closest()直接在DOM树上查找，并且您要搜索的元素不是.eb元素的.eb元素； 他们是祖父母的兄弟姐妹。 要解决此问题，请使用closest()以获得共同的祖先，然后使用find() 。 尝试这个：

 $(".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

如果要使用jQuery函数，则应使用变量作为jQuery对象，如下所示

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