0

ここでは、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;

解決策はありますか？

4

1 に答える 1

11

実行時に要素が存在する場合、コードは正しいです ( a と仮定});) 。ループでは、 、次に、そしてを受け取ります。ar"CustomerScreen""TraderScreen""DistributorScreen"

上記の但し書きに注意してください。たとえば、次のように 3 つの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>これが、通常、スクリプトをドキュメントの最後、終了タグの直前に配置することがベスト プラクティスである理由の 1 つです。あるいは、どうしても要素の上にスクリプトを配置する必要がある場合は、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>

実例| ソース

jQuery は、DOM がロードされた後に関数を実行します。しかし、これは実際にはライブラリ コードで使用するためのものです。独自のページ コードの場合は、スクリプトを最後に置くだけです。

于 2012-11-28T09:00:37.763 に答える