通过 jQuery closest 获取内容

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

问题是因为 closest() 直接查找 DOM 树，而您要搜索的元素不是 .eb 元素的 parents；他们是它的祖父母的兄弟姐妹。要解决此问题，请使用 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 3

一种稍微不同的方法可能是遍历 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 4

如果你想使用 jQuery 函数，那么你应该使用变量作为 jQuery 对象，如下所示

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

通过 jQuery closest 获取内容

Getting contents by jQuery closest

javascript

jquery

closest