01/10/2018, 13:41

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

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 !

realx viết 15:50 ngày 01/10/2018

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/

Thinh Minh Ha viết 15:51 ngày 01/10/2018

Thử cái này nhé

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 .

realx viết 15:41 ngày 01/10/2018

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/

Thinh Minh Ha viết 15:50 ngày 01/10/2018