Hỏi cách thêm thẻ <div> bao bên ngoài thẻ <p> bằng Jquery

#1

Chào các bạn, xin các bạn cho mình hỏi vấn đề như thế này.
Giả sử mình có 9 thẻ

như sau:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>

Bây giờ mình muốn dùng Jquery để bao bọc bên ngoài thẻ <p> bằng thẻ <div> theo quy luật : cứ 3 thẻ <p> một, 3 thẻ <p> một vv… lần lượt vậy. Tức là nó sẽ thế này :

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

<div>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

<div>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Mong các bạn giúp đỡ mình . Mình xin cám ơn !

#2

Thử cái này nhé

var $pArr = $('p');
	var pArrLen = $pArr.length;
	for (var i = 0;i < pArrLen;i+=3){
	      $pArr.filter(':eq('+i+'),:eq('+(i+1)+'),:eq('+(i+2)+')').wrapAll('<div />');
	};

https://jsfiddle.net/zaLmfc47/

1 Like
#3

Chuẩn rồi ạ, Cám ơn bạn rất nhiều.

Nhưng mình thấy nó có một hạn chế, ví dụ như đề bài thay đổi không phải là 3 nữa mà là một con số nào đó lớn hơn thì dòng Code này :

$pArr.filter(':eq('+i+'),:eq('+(i+1)+'),:eq('+(i+2)+')').wrapAll('<div/>')

viết sẽ phải rất dài . Không biết bạn có giải pháp nào hay hơn không .

#4

Mình mới update code cho bạn

var $pArr = $('p');
	var pArrLen = $pArr.length;
  var numGroup=3;
	for (var i = 0;i < pArrLen;i+=numGroup){
	      if(i==0)
        	$pArr.filter(':lt('+numGroup+')').wrapAll('<div />');
        else
        	$pArr.filter(':gt('+(i-1)+'):lt('+numGroup+')').wrapAll('<div />');
	};

https://jsfiddle.net/zaLmfc47/3/

2 Likes
#5

Hay quá bạn ơi. Mình cám ơn bạn nhiều nha

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?