我有一个元素列表,我想在页面加载后使用标题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>
有什么想法吗?提前谢谢。
答案 0 :(得分:8)
从jQuery v1.4开始,您可以使用nextUntil()
方法,允许您执行以下操作:
var split_at = 'div.header';
$(split_at).each(function() {
$(this).add($(this).nextUntil(split_at)).wrapAll("<div class='wrap'/>");
});
答案 1 :(得分:4)
你要做的是一个可怕的想法。那是你应该在服务器端做的事情。 (总有例外)。
话虽如此,下面的代码应该按照你的要求做。
$('.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的标准方式,那就很抱歉。
答案 2 :(得分:2)
这是另一种方法。不像安德鲁那样漂亮(编辑:虽然我尝试了他的并且它不起作用?我确定这只是一些轻微的疏忽)但基本上做同样的事情:
jQuery(function($){
var $everything = $('.header,.test');
var splitAtHeaders = [];
$everything.each(function(index){
var $item = $(this);
if ('header'===$item.attr('className') || !splitAtHeaders.length) {
splitAtHeaders[splitAtHeaders.length] = [];
}
splitAtHeaders[splitAtHeaders.length-1].push($item);
});
$.each(splitAtHeaders, function(){
var currentWrapper = null;
$.each(this, function(index){
if (0===index || !currentWrapper) {
currentWrapper = this.wrap('<div class="wrap"></div>');
}
else {
currentWrapper.append(this);
}
});
});
});
以下是演示:http://jsbin.com/ojoqi/edit
但我确实同意,如果你可以帮助它,这应该是服务器端处理的。
编辑:我试图修复安德鲁的解决方案。这就是我想出的:$('.header').each(function() {
var next = $(this).next();
var head = $(this).wrap('<div class="wrap"></div>');
while (next && next.hasClass('test')) {
var curr = next;
next = next.next();
head.append(curr);
}
});
答案 3 :(得分:0)
假设:标题会有不同的文字。如果没有,请使用其他内容来区分标题,例如id属性。
$("div.header").each(function() {
var $header = $(this);
var $tests = $.grep(
$("div.test"),
function(n) {
return $(n).prevAll("div.header").text() == $header.text();
});
$.merge($header, $tests).wrapAll($("<div class='wrap'>"));
});
答案 4 :(得分:0)
我会这样做:
var divs = $( 'div' );
var headers = divs.filter( '.header' );
if ( headers.length != 0 ) {
var start = 0;
var wrapper = $( '<div class="wrap" />' );
headers.each( function() {
var pos = divs.index( this );
divs.slice( start, pos - 1 ).wrapAll( wrapper.clone() );
start = pos;
} );
divs.slice( start ).wrapAll( wrapper.clone() );
}
答案 5 :(得分:0)