Bir div'deki her 3 div'i sarmala

nth-child3 div'i kullanarak kaydırmak için seçicileri kullanmak mümkün müdür .wrapAll? Doğru denklemi çözemiyorum.

yani...

<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

olur ...

<div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
</div>

Bunu şu şekilde yapabilirsiniz .slice():

var divs = $("div > div");
for(var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div class='new'></div>");
}

Burada bir demo deneyebilirsiniz , burada tek yaptığımız, sarmak ve döngü yapmak istediğiniz öğeleri almak, .wrapAll()3'lü gruplar halinde bir sonraki 3'e geçmek vb. Her seferinde 3'ü saracak ve ancak birçoğu sonunda kalır, örneğin 3, 3, 3, 2 eğer durum buysa.

Bunu yapmayı oldukça kolaylaştıran genel bir yığın işlevi yazdım:

$.fn.chunk = function(size) {
    var arr = [];
    for (var i = 0; i < this.length; i += size) {
        arr.push(this.slice(i, i + size));
    }
    return this.pushStack(arr, "chunk", size);
}

$("div > div").chunk(3).wrap('<div class="new"></div>');

$.fn.chunk = function(size) {
  var arr = [];
  for (var i = 0; i < this.length; i += size) {
    arr.push(this.slice(i, i + size));
  }
  return this.pushStack(arr, "chunk", size);
}

$("div > div").chunk(3).wrap('<div class="new"></div>');

div > div {
  width: 50px;
  height: 50px;
  background: blue;
  margin: 2px;
  float: left;
}

div.new {
  background: red;
  height: auto;
  width: auto;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

Eklenti

$(function() {
    $.fn.EveryWhat = function(arg1) {
        var arr = [];
        if($.isNumeric(arg1)) {
            $.each(this, function(idx, item) {
                var newNum = idx + 1;
                if(newNum%arg1 == 0)
                arr.push(item);
            });
        }
        return this.pushStack(arr, "EveryWhat", "");
    }
});

Bu nasıl kullanılır.

EveryWhat()Öğeyi çağırın ve toplamak istediğiniz her öğe için bir numara girin.

$("div").EveryWhat(2).wrapInner('<div class="new" />');

wrapinner'ın alıntıları <div class="new" />, bir sınıf ve kapanış etiketi ile uygun şekilde biçimlendirilmiş olmalıdır . Stackoverflow, neye benzediğini göstermemi engelliyor ama burada kendi kendine kapanan bir div'in bağlantısı var.

Neye benzemeli

Bu, belirttiğiniz diğer tüm sayıyı saracaktır. Jquery 1.8.2 kullanıyorum. bu yüzden EveryWhat(3)her seferinde seçici arama ve bir numara kullanmayı unutmayın . Tabii ki sayfanın altına koyarak veya

$(document).ready(function() {  
    //place above code here
});

Her n'yi ve sonra .wrapInner('<div class="new" />')aynı sonuçlar için kullanabilirsiniz.

İşte yukarıda Nick'in daha kullanışlı bir versiyonu:

window.WrapMatch = function(sel, count, className){
  for(var i = 0; i < sel.length; i+=count) {
    sel.slice(i, i+count).wrapAll('<div class="'+className+'" />');
  }
}

Bunu şu şekilde kullanırsınız:

var ele = $('#menu > ul > li'); 
window.WrapMatch(ele, 5, 'new-class-name');

pencere, elbette İşleyiciler ad alanınızla değiştirilmelidir.

Güncellendi: jQuery'den yararlanan biraz daha iyi bir sürüm

(function($){
  $.fn.wrapMatch = function(count, className) {
    var length = this.length;
    for(var i = 0; i < length ; i+=count) {
      this.slice(i, i+count).wrapAll('<div '+((typeof className == 'string')?'class="'+className+'"':'')+'/>');
    }
    return this;
  }; 
})(jQuery);

Gibi kullanın:

$('.list-parent li').wrapMatch(5,'newclass');

Sarmalayıcı adı için ikinci parametre isteğe bağlıdır.

$(function() {
    $.fn.WrapThis = function(arg1, arg2) { /*=Takes 2 arguments, arg1 is how many elements to wrap together, arg2 is the element to wrap*/

        var wrapClass = "column"; //=Set class name for wrapping element

        var itemLength = $(this).find(arg2).length; //=Get the total length of elements
        var remainder = itemLength%arg1; //=Calculate the remainder for the last array
        var lastArray = itemLength - remainder; //=Calculate where the last array should begin

        var arr = [];

        if($.isNumeric(arg1))
        {
            $(this).find(arg2).each(function(idx, item) {
                var newNum = idx + 1;

                if(newNum%arg1 !== 0 && newNum <= lastArray){
                    arr.push(item);
                }
                else if(newNum%arg1 == 0 && newNum <= lastArray) {
                    arr.push(item);
                    var column = $(this).pushStack(arr);
                    column.wrapAll('<div class="' + wrapClass + '"/>'); //=If the array reaches arg1 setting then wrap the array in a column
                    arr = [];
                }
                else if(newNum > lastArray && newNum !== itemLength){ //=If newNum is greater than the lastArray setting then start new array of elements
                    arr.push(item);
                }
                else { //=If newNum is greater than the length of all the elements then wrap the remainder of elements in a column
                    arr.push(item);
                    var column = $(this).pushStack(arr);
                    column.wrapAll('<div class="' + wrapClass + '"/>');
                    arr = []
                }
            });
        }
    }
});

Kyle'ın eklenti fikrini aldım ve onu otomatik olarak sarmaya ve iki argüman alacak şekilde genişlettim. Başlamak için işe yaramadı, ancak koda birkaç düzenleme ve eklemeyle çalıştırdım.

Fonksiyonu çağırmak için sadece sarmak istediğiniz şeyin ana öğesini kullanın ve ardından argümanlarınızı aşağıdaki gibi ayarlayın.

$('#container').WrapThis(5, 'li');

İlk bağımsız değişken, kaç öğeyi birbirine sarmak istediğinizdir ve ikinci bağımsız değişken, sarmak istediğiniz öğe türüdür.

Değişkenin altındaki ana işlevde sarma elemanının sınıfını değiştirebilirsiniz wrapClass.

Bu yanıtı, bunun kopyası olan başka bir soru için hazırladım. Yani belki benim varyantım biri için faydalı olacaktır:

Bence üç unsuru da sarmanın çözümü:

var $lines = $('.w-col'), // All Dom elelements with class .w-col
     holder = []; //Collect DOM elelements

$lines.each(function (i, item) {
  holder.push(item);

  if (holder.length === 3) {
    $(holder).wrapAll('<div class="w-row" />');
    holder.length  = 0;
  }
});

$(holder).wrapAll('<div class="w-row" />'); //Wrap last elements with div(class=w-row)

Aynı kodu jsbin'de bazı iyileştirmelerle yazdım http://jsbin.com/necozu/17/ veya http://jsbin.com/necozu/16/