Получение содержимого по JQuery ближайший

Question

У меня проблема с использованием JQuery's 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

Если вы хотите использовать функции jQuery, то вы должны использовать переменную как объект jQuery, как показано ниже

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

Answer 4

Проблема в том, что 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>