1. ホーム
  2. jquery

[解決済み] 3つのdivを1つのdivで囲む

2023-04-13 12:10:42

質問

このような場合 nth-child セレクタを使用して 3 つの div をラップすることは可能ですか? .wrapAll ? 私は正しい式を解決することができないようです。

というわけで...

<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

は...

<div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
</div>

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

あなたは、それを行うことができます .slice() のような、このような。

var divs = $("div > div");
for(var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div class='new'></div>");
}

ここでデモを試すことができます ここでやっていることは、ラップしたい要素を取得し、それらをループさせることです。 .wrapAll() を3つずつ行い、次の3つに移る、などです。 一度に3つずつラップし、最後にいくつ残っていても、例えば3、3、3、2というようにラップします。