javascript - 如何用 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()文档:

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

同样，您的 parent().parent() 调用可以替换为 closest()或parents() :

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