jQuery Làm thế nào để quấn div xung quanh nhiều yếu tố cùng một lớp

Question

Tôi đang cố gắng để bọc nhiều div cùng một lớp vào một div và bỏ qua divs không cùng một lớp. .wrap không kết hợp chúng, và .wrapAll ném các div không phân loại bên dưới. Tôi đã loanh quanh với những nỗ lực để tạo ra một giải pháp thay thế nhưng không có kết quả.

gốc

<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div>Skip in wrap</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 

continued... 

Wanted quả

<div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
</div> 
<div>Skip in wrap</div> 
<div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
</div> 

Answer 1

Bạn có thể lặp nhanh chóng qua các chi tiết <div> sử dụng vòng lặp for. Trong mã bên dưới, chỉ cần thay đổi công cụ chọn ban đầu ở đây để lấy tất cả các div anh chị em đó, ví dụ: #content > div.entry hoặc bất cứ nơi đâu:

var divs = $("div.entry"); 
for(var i=0; i<divs.length;) { 
    i += divs.eq(i).nextUntil(':not(.entry)').andSelf().wrapAll('<div />').length; 
}​ 

You can give it a try here. Chúng ta chỉ đang lặp lại, các phần tử .entry<div> sử dụng .nextUntil() để nhận tất cả các phần tử .entry cho đến khi có một số không .entry bằng cách sử dụng :not() selector. Sau đó, chúng tôi sẽ lấy các yếu tố tiếp theo, cộng với yếu tố chúng tôi bắt đầu với (.andSelf()) và thực hiện .wrapAll() trên nhóm đó. Sau khi chúng được bao bọc, chúng ta sẽ bỏ qua nhiều yếu tố trong vòng lặp.

Answer 2

Tôi chỉ whipped lên một đơn giản custom solution.

var i, wrap, wrap_number = 0; 
$('div').each(function(){ //group entries into blocks "entry_wrap_#" 
    var div = $(this); 
    if (div.is('.entry')) { 
     wrap = 'entry_wrap_' + wrap_number; 
     div.addClass(wrap); 
    } else { 
     wrap_number++; 
    } 
}); 
for (i = 0; i <= wrap_number; i++) { //wrap all blocks and remove class 
    wrap = 'entry_wrap_' + i; 
    $('.' + wrap).wrapAll('<div class="wrap"/>').removeClass(wrap); 
} 

Answer 3

Bạn có thể nối thêm các div mới vào đánh dấu của mình, sau đó nối thêm nội dung bạn muốn gói vào.

Nếu đánh dấu của bạn là thế này:

<div class="wrap"> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
</div> 

Sử dụng sau đây để thêm hai divs mới (column-one và column-two) và sau đó thêm các nội dung thích hợp vào những divs:

// Set vars for column content 
var colOne = $('.col-1').nextUntil('.col-2').addBack(); 
var colTwo = $('.col-2').nextAll().addBack(); 

// Append new divs that will take the column content 
$('.wrap').append('<div class="column-first group" /><div class="column-second ground" />'); 

// Append column content to new divs 
$(colOne).appendTo('.column-first'); 
$(colTwo).appendTo('.column-second'); 

Demo ở đây: http://codepen.io/zgreen/pen/FKvLH