Как выбрать этот элемент с помощью jQuery?

Question

У меня есть эта часть HTML-кода.

<div class="row member-item"> 
    <div class="col-md-3"><img src={{ i.mem_imgurl }}></div> 
    <div class="col-md-2">姓名<br><div class="mem_name">{{ i.mem_name }}</div></div> 
    <div class="col-md-2">组别<br><div class="mem_group">{{ i.mem_group }}</div></div> 
    <div class="col-md-2">年级<br><div class="mem_year">{{ i.mem_year }}</div></div> 
    <div class="col-md-1"><button class="btn btn-danger btn-sm deleteNode" onclick="delNode(this)">Delete</button></div> 
</div> 

И я пишу JS следующим образом,

function delNode(btn) { 
    var mem_item = $(btn).parent().parent(); 
    var mem_name = $(mem_item).children("div.mem_name").text(); 
    alert(mem_name); 
    console.log(mem_name); 
    mem_item.hide() 
} 

Я хочу, чтобы получить текстовое значение div.mem_name, но так или иначе он просто не работает :(

Answer 1

children только функция вы можете использовать find для поиска по дереву детей. Это должно работать:

var mem_name = $(mem_item).find("div.mem_name").text(); 

Это из JQuery children() документации:

В .children() метод отличается от .find() в этом .children() только путешествует один уровень вниз по дереву DOM в то время как .find() может пересекайте несколько уровней, чтобы выбрать элементы-потомки (внуки и т. д.).

Аналогично, ваш parent().parent() вызов может быть заменен closest() или parents():

var mem_item = $(btn).parents(".member-item"); 

Answer 2

Вы можете использовать .closest и .find вместе

Сценарий:

$(document).ready(function(){ 
      $(".deleteNode").click(function(){  
       var mem_name = $(this).closest('.row').find('.mem_name').text(); 
       alert(mem_name); 
       console.log(mem_name); 
      }); 
     }); 

HTML:

<div class="row member-item"> 
    <div class="col-md-3"><img src=""></div> 
    <div class="col-md-2">姓名<br><div class="mem_name">name</div></div> 
    <div class="col-md-2">组别<br><div class="mem_group">mem_group</div></div> 
    <div class="col-md-2">年级<br><div class="mem_year">mem_year</div></div> 
    <div class="col-md-1"><button class="btn btn-danger btn-sm deleteNode" >Delete</button></div> 
</div> 

JSFIDDLE DEMO