在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>标记之前.或者,如果您必须将脚本放在元素上方,则可以使用jQuery ready事件:

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

实例 | 资源

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