การห่อหุ้มหลายองค์ประกอบใน jQuery

สามารถห่อหุ้มไม่ใช่ทีละองค์ประกอบ แต่ห่อหุ้มองค์ประกอบที่พบทั้งหมดพร้อมกันได้ด้วยเมธอด wrapAll

ในโค้ด HTML นำเสนอกลุ่มของย่อหน้า:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

มาเริ่มต้นโดยค้นหาย่อหน้าทั้งหมดที่มีคลาส www และ ห่อหุ้มพวกมันด้วยแท็ก div เดียว:

$('.www').wrapAll('<div></div>');

โค้ด HTML จะมีลักษณะดังนี้:

<div>
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
</div>
<p>text</p>

โปรดทราบว่าหากองค์ประกอบที่ต้องการห่อหุ้มไม่ได้อยู่ ติดกัน เมธอด wrapAll จะ ย้ายองค์ประกอบเหล่านั้นมาไว้ที่เดียวกันก่อน จากนั้น จึงค่อยห่อหุ้มพวกมัน ดูตัวอย่างต่อไปนี้:

<p class="www">text1</p>
<p class="www">text2</p>
<p>text</p>
<p class="www">text3</p>

ใช้เมธอด wrapAll:

$('.www').wrapAll('<div></div>');

ในที่สุดเราจะได้โค้ด HTML ดังต่อไปนี้:

<div>
	<p class="www">text1</p>
	<p class="www">text2</p>
	<p class="www">text3</p>
</div>
<p>text</p>

เมธอดสำหรับห่อหุ้มองค์ประกอบยังมีคุณสมบัติ ที่สามารถนำฟังก์ชันไปใช้กับแต่ละ องค์ประกอบในชุดที่เลือกได้

ห่อหุ้ม h2 ทั้งหมดไว้ใน i เดียว