0

jQuery .wrap()関数を使用すると、一致した要素をカスタム HTML でラップできます。ただし、この関数では、一致する要素を HTML のどこに挿入するかを指定することはできません。常に最も内側の要素に挿入されます。

(角を丸くするために)かなり基本的なテーブルで div をラップする必要がありますが、唯一の問題は、テーブルに 2 つの行があり、要素を 2 行目に表示することです。例えば：

$("#my-div").wrap('<table> \
                        <tr> \
                            <td class="corner-topleft" colspan="2"></td> \
                            <td class="corner-topright"></td> \
                        </tr> \
                        <tr> \
                            <td class="corner-bottomleft"></td> \
                            <td class="DIV-SHOULD-APPEAR-HERE"></td> \
                            <td class="corder-bottomright"></td> \
                        </tr> \
                    </table>');

このスクリプトを実行しようとすると、wrap() 関数は一致した要素を自動的に最初のテーブル セル(つまり、"corner-topleft") 内に配置します。これは、これが「最初の最も内側の要素」であるためです。

jQuery を使用して、上記の複数行テーブルで要素をラップするにはどうすればよいですか?

4

1 に答える 1

1

次のように、これを手動で行う必要があります。

var div = $('#my-div');
var table = $('<table> \
                        <tr> \
                            <td class="corner-topleft" colspan="2"></td> \
                            <td class="corner-topright"></td> \
                        </tr> \
                        <tr> \
                            <td class="corner-bottomleft"></td> \
                            <td class="DIV-SHOULD-APPEAR-HERE"></td> \
                            <td class="corder-bottomright"></td> \
                        </tr> \
                    </table>');
table.find('.DIV-SHOULD-APPEAR-HERE').append(div.clone());
// Have to clone the div, because of the possible 
// circular reference in next line.
div.replaceWith(table);

私はそれをテストしませんでしたが、うまくいかなくても、アイデアを理解する必要があります。

于 2012-07-10T08:02:11.470 に答える