[英]Use jQuery to wrap around groups of elements
我有一個元素列表,我想在頁面加載后使用標題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>
有任何想法嗎? 提前致謝。
從jQuery v1.4開始,您可以使用nextUntil()
方法,允許您執行以下操作:
var split_at = 'div.header';
$(split_at).each(function() {
$(this).add($(this).nextUntil(split_at)).wrapAll("<div class='wrap'/>");
});
你要做的是一個可怕的想法 。 那是你應該在服務器端做的事情。 (總有例外)。
話雖這么說,以下代碼應該按照你的要求做。
$('.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的標准方式。
這是另一種方法。 不像安德魯那樣漂亮(編輯:雖然我嘗試了他的並且它不起作用?我確定這只是一些小的疏忽)但基本上是相同的事情:
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);
}
});
假設:標題會有不同的文字。 如果沒有,請使用其他內容來區分標頭,例如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'>"));
});
我這樣做:
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() );
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.