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

Posted 2023-02-22

【中文标题】Jquery 循环遍历在运行时创建的元素

【英文标题】：Jquery Looping through elements created at runtime

【发布时间】：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 属性的单个元素。这就是你只得到一次检查的原因。

【参考方案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")