Jquery 循环遍历在运行时创建的元素答案

【问题标题】：Jquery Looping through elements created at runtimeJquery 循环遍历在运行时创建的元素
【发布时间】：2013-02-24 07:04:31
【问题描述】：

我有一个传递给页面的列表，并且元素是在运行时创建的。我想遍历这些元素并为每个元素执行一些操作。下面是我的代码：对于从此列表中创建的每个人，我想对该人进行检查。有人可以帮我吗？我只检查一次：

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>

【问题讨论】：

id 选择器，如 jquery 文档所述：选择具有给定 id 属性的单个元素。这就是你只得到一次检查的原因。

标签： jquery html loops foreach

【解决方案1】：

一个页面上不能有多个元素具有相同的id 属性。尝试改用类。

尝试类似：

$(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>

【讨论】：

【解决方案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);
    }
});

【讨论】：

.find 与动态添加的元素没有任何关系。这只是查找当前匹配元素集的后代的一种方式。
@Andbdrew，实际上确实如此。请检查以验证.find() 可以找到新添加到 DOM 的元素。（您是否因此而对我投了反对票？）
这与我为什么不赞成您的回答有关，但也有其他原因。 OP 不想将点击事件附加到这些元素，因此您的脚本不会回答问题。此外，请参阅有关 .find 的文档 api.jquery.com/find 。它与动态添加事件无关。它只允许您在当前匹配的集合中进行搜索。并不是您关于 find 的陈述不正确，它与手头的问题无关。这对你有意义吗？
我同意 click 事件部分，但我向 OP 展示了一个示例。反正我修好了。但是，我不同意您对.find() 的看法，显然您还没有处于理解我的状态。所以谢谢你的反对。
正如我上面所说，.find 可以找到动态到页面的元素，但这一事实与问题或解决方案完全无关。

【解决方案3】：

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

另外，您需要在我们的函数中使用this 而不是$("#userId")。

所以做这样的事情：

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

【讨论】：

.val是方法，需要调用
谢谢。抱歉打错了！

【解决方案4】：

为什么不使用 jQuery 的 TAG 进行选择。例如，具有您的用户列表的元素是一个 id 为 tblUsers 的表，那么您可以在运行时迭代生成的 TR 或 TD，如下所示：

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

如果你在 tds 中有输入，你可以深入选择

$("tblUsers tr td input")

【讨论】：