我有一个元素列表,我想在页面加载后使用标题div来分隔它们.所以下面的代码,
<div class="header">Header 1</div> <div class='test'>Test 1</div> <div class='test'>Test 2</div> <div class='test'>Test 3</div> <div class="header">Header 2</div> <div class='test'>Test 4</div> <div class='test'>Test 5</div> <div class='test'>Test 6</div> <div class='test'>Test 7</div> <div class='test'>Test 8</div> <div class="header">Header 3</div> <div class='test'>Test 9</div> <div class='test'>Test 10</div> <div class='test'>Test 11</div> <div class='test'>Test 12</div> <div class="header">Header 4</div> <div class='test'>Test 13</div> <div class='test'>Test 14</div>
会成为,
<div class='wrap'> <div class="header">Header 1</div> <div class='test'>Test 1</div> <div class='test'>Test 2</div> <div class='test'>Test 3</div> </div> <div class='wrap'> <div class="header">Header 2</div> <div class='test'>Test 4</div> <div class='test'>Test 5</div> <div class='test'>Test 6</div> <div class='test'>Test 7</div> <div class='test'>Test 8</div> </div> <div class='wrap'> <div class="header">Header 3</div> <div class='test'>Test 9</div> <div class='test'>Test 10</div> <div class='test'>Test 11</div> <div class='test'>Test 12</div> </div> <div class='wrap'> <div class="header">Header 4</div> <div class='test'>Test 13</div> <div class='test'>Test 14</div> </div>
有任何想法吗？提前致谢.
解决方法
你要做的是一个可怕的想法.那是你应该在服务器端做的事情. (总有例外).
话虽这么说,以下代码应该按照你的要求做.
$('.header').each(function() {
var head = $(this);
if(!head.parent().hasClass('wrap')) {
head.before('div class="wrap"></div>');
var wrap = head.prev();
var curr = head;
do {
var currEl = curr;
curr = curr.next();
currEl.appendTo(wrap);
} while(curr.length > 0 && !curr.hasClass('header'));
}
});
注意：
我通常不用jQuery开发,很抱歉如果我不遵循jQuery的标准方式.
