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

如何用jQuery选择这个元素？

2 个答案: