Получение содержимого от 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

Этот вопрос потому что 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>

Answer 3

несколько иной подход может быть обходе к 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 4

, если вы хотите использовать JQuery функции, то вы должны использовать var iable как объект JQuery как ниже

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