按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元素的父元素；它们是它的祖父元素的兄弟元素。要解决此问题，请先使用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>

​