任意の数ごとに要素で囲い込む方法

2018.12.20

要素の中にある、複数ある子要素に対して、n個ずつ特定の要素で囲い込む方法です。
例えば、div要素にずらっと並んだimg要素をクラスimg-boxという要素を作成して三個ずつ、
まとめるとすると下記のようになります。

■変更前
<div id="box">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
</ul>

■変更後
<div id="box">
   <div id="img-box">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
   </div>
</div>
<div id="box">
   <div id="img-box">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
   </div>
</div>

■変更前

</ul>

■変更後

</div>

</div>

この変更をjqeryで行う方法は、#boxという要素に対して、子要素のimgを指定して.wrapAllを使用してdivタグで内包します。
whileでの記述ではlengthでループする度にimgの存在をカウントして、0になるまでループさせる記述です。

$(function(){
	do {
		$("#box").children("img:lt(3)").wrapAll('<div class="img-box"></div>')
	}while($("#box").children("img").length);
});

$(function(){

do {

$("#box").children("img:lt(3)").wrapAll('<div class="img-box"></div>')

}while($("#box").children("img").length);

});

複数のカスタム投稿に共通のカスタムタクソミーを設定する

WordPressのrssにアイキャッチ画像の情報を出力させる

任意の数ごとに要素で囲い込む方法

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

第五十二回「ぬるっとトップページへ戻るのボタンが現れる」

Photoshop画像切り抜き

WEB広告の話(ディスプレイ広告編)

片方の要素が空の時の調整

Photoshop CC

wpプラグインulikeボタンを記事一覧でも表示させる方法