jquery - 在jQuery中使用类名获取元素ID

Question

在这里，我有 jQuery 动态生成的 HTML 标记说..

<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>

我将所有动态创建的表行类名设置为行，然后我想使用类名循环它并使用每个获取特定行的 id。但我无法得到，这就是我尝试过的..

$('.rows').each(function () {
            var ar = this.id;

有什么解决办法吗？

Answer 1

您的代码是正确的（假设 a });），前提是您运行它时元素存在。在循环中，ar将接收"CustomerScreen"，然后"TraderScreen"，然后"DistributorScreen"。

请注意上面的附带条件。例如，这将按id顺序显示这三个值：

<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>
<script>
$('.rows').each(function () {
    var ar = this.id;
    console.log(ar);
});
</script>

实例| 来源

...因为脚本位于文档中的元素之后。

相反，这不会显示任何内容：

<script>
$('.rows').each(function () {
    var ar = this.id;
    console.log(ar);
});
</script>
<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>

实例| 来源

...因为脚本位于元素之上，并且它们在运行时还不存在。

这就是为什么最好将脚本放在文档的最后，就在结束</body>标记之前的原因之一。或者，如果您必须将脚本放在元素之上，您可以使用 jQueryready事件：

<script>
$(function() {
    $('.rows').each(function () {
        var ar = this.id;
        console.log(ar);
    });
});
</script>
<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>

实例| 来源

jQuery 将在 DOM 加载后运行该函数。但这确实适用于库代码；对于您自己的页面代码，只需将脚本放在末尾即可。