javascript - 克隆一个 div 并在 div 中获取特定 id 的值

Question

我有一个允许我添加或删除行数 (divs) 的 html 和一个允许我阅读该行数 (divs) 的按钮 所以行如下

<div id="mainContent">
            <div id="StaffRow" class="WorkItemRow row" display:none;">
                <div id="selections">
                    <select class="form-control">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div>
                    Name
                </div>
                <div>
                    <input id="MemberName" type="text" value="">
                </div>
                <div>
                    Mail
                </div>
            <div>
                <input type="text" id="Mail" value="">
            </div>


    </div>

我已经成功地克隆了这一行

$('#ButtonAddStaff').click(function (e) {
    counters++;
    $("#StaffRow").clone(true).attr('id', "#StaffRow" + staffCount).appendTo("#mainContent");
    $(".WorkItemRow").last().css('display', '');

});

但现在的问题是我似乎无法遍历创建的员工行并获取数据。

我试过这样获取数据，但它返回未定义

    for (let i = (counters- 1) ; i >= 0; i--) {
        if (counters!= 1)
            var nameData= document.getElementById('StaffRow' + i).children("#MemberName").val();
        nameData= document.getElementById('StaffRow' + i);
        list.push(nameData);
    }

知道我应该在哪里寻求完成我想要的吗？

所以我想做的是迭代创建的员工行，该员工行是在按下按钮并在每一行中获取成员名的值之后创建的

Answer 1

我认为你的问题出在这里:

.attr('id', "#StaffRow" + staffCount)

当你这样做时，你实际上设置了一个带有 sharp 的 id。这个函数的第二个参数不是一种选择器。然后你做一个没有这个尖锐的 document.getElementById。

你应该使用:

.attr('id', "StaffRow" + staffCount)