[解決済み] テーブル行のjQuery各ループ [重複]。

質問

のようなものが出ています。

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

のように各trをループするようにjQueryを書きました。

$('#tblOne tr').each(function() {...code...});

しかし、問題は、それが"tblTwo"の"tr"をループしていることであり、それは私が望んでいない。 誰かこれを解決するために何かを提案することができますか？

どのように解決するのですか？

jQueryでは、ただ使うだけです。

$('#tblOne > tbody  > tr').each(function() {...code...});

子セレクタを使用して ( > ) を使うと、すべての子プロセスの上を歩くことになります。 すべて の子孫ではない)、例えば3つの行の上を歩きます。

$('table > tbody  > tr').each(function(index, tr) { 
   console.log(index);
   console.log(tr);
});

結果

0
<tr>
1 
<tr>
2
<tr>

で バニラJS を使うことができます。 document.querySelectorAll() を使い、行の上を歩くと forEach()

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});