jQuery 循环遍历在运行时创建的元素。

Question

我有一个列表传递到页面上，并在运行时创建元素。我想循环遍历这些元素并对每个元素执行某些操作。以下是我的代码：

对于从此列表创建的每个人员，我想对该人员执行检查。可以有人帮忙吗？我只得到了一次检查的结果。

jQuery：

$(document).ready(function() {

    $("#userId").each(function(i){
        if ($("#userId").val != '') {
            alert('not null' + i);
        }
    });                 
});

JSP：

<c:forEach items="${person}" var="person">

<input= type="text" id="userId" value="${person.userid}" />
    First name:- ${person.fName} , Last Name:- ${person.lName}
</c:forEach>

- devdar

---

id选择器，正如jQuery文档所述：“选择具有给定id属性的单个元素。”这就是为什么您只会得到一次检查的原因。 - emco

Answer 1

在同一页面上，不能有多个元素使用相同的id属性。请尝试使用类（class）代替。

可以尝试以下方式：

$(document).ready(function() {

   $(".userId").each(function(i){
       if ($(this).val() != '') {
           alert('not null' + i);
       }
   });
});

需要注意的是，.val 是一个方法，所以你需要调用它才能获取值。使用 .val() 而不是 .val。如你现在的代码，$(selector).val 是一个函数，因此它永远不会是你正在测试的空字符串。

另外，你的 JSP 应该像这样：

<c:forEach items="${person}" var="person">

<input= type="text" class="userId" value="${person.userid}" />
    First name:- ${person.fName} , Last Name:- ${person.lName}
</c:forEach>

- Andbdrew

Answer 2

您的循环将创建具有相同ID的多个元素，请先更改该问题。最好使用类名代替。

<c:forEach items="${person}" var="person">

    <input= type="text" class="user" id="userId-${person.userid}" value="${person.userid}" />
       <!--             ^ Use Class &  ^ Id to uniquely identify the user -->
       First name:- ${person.fName} , Last Name:- ${person.lName}
</c:forEach>

接下来，你可以使用.find()来找到甚至是动态生成的元素。但我建议使用我的解决方案，使用class属性。

$(".user").each(function(i) {
    if ($(this).val() != '') {
          alert('not null' + i);
    }
});

- Starx

---

.find与动态添加的元素无关，它只是一种查找当前匹配元素集合中后代元素的方法。 - Andbdrew

@Andbdrew，实际上它可以。请检查以验证.find()是否可以找到新添加到DOM中的元素。（你因为这个原因给我投了反对票吗？） - Starx

这与我为什么要downvote你的答案有关，但也有其他原因。OP不想将点击事件附加到这些元素上，因此你的脚本并没有回答问题。另外，请参阅此处的.find文档http://api.jquery.com/find/。它与动态添加事件无关，只是允许在当前匹配集合中进行搜索。这并不是说你对find的说法是错误的，只是与手头的问题无关。你明白我的意思吗？ - Andbdrew

我同意click事件部分，但我向OP展示了一个例子。我已经修复了它。然而，我不同意你关于.find()的评论，显然你没有理解我的意思。所以感谢你的负评。 - Starx

正如我上面所说的，.find 可以找到动态添加到页面的元素，但这个事实与问题或解决方案无关。 - Andbdrew

Answer 3

正如 @Andbdrew 所说，使用类而不是 id，因为在找到匹配的 id 后，它将停止寻找更多项目。

此外，你需要在我们的函数内使用 this 而不是 $("#userId")。

因此，可以像这样做：

$(".userClass").each(function(i) {
    if ($(this).val() != '') {
        alert('not null' + i);
    }
});

- krillgar

---

".val" 是一个方法，需要被调用。 - Andbdrew

谢谢。对于打字错误我很抱歉！ - krillgar

Answer 4

为什么不使用jQuery通过标签进行选择。 例如，具有用户列表的元素是一个id为tblUsers的表格，然后您可以按照以下方式迭代运行时生成的TR或TD：

$("#tblUsers tr").each(function(i){
        alert('td' + i);
 });   

如果您在tds中有输入，您可以深入选择如下：

$("tblUsers tr td input")

- ahmadalibaloch