Question

这里我有jQuery动态生成的HTML标签说..

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

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

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

任何解决方案？

Answer 1

您的代码是正确的（假设});），提供运行它时元素存在。在循环中，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>

Live Example | Source

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

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

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

Live Example | Source

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

这是将脚本放在文档末尾的最佳做法的原因之一，就在结束</body>标记之前。或者，如果您绝对将脚本放在元素上方，则可以使用jQuery ready event：

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

Live Example | Source

jQuery将在加载DOM后运行该函数。但这确实适用于库代码;对于你自己的页面代码，只需将脚本放在最后。

在jQuery中使用类名获取元素Id

1 个答案: