हर 3 डिव को एक डिव में लपेटें

Question

क्या nth-childचयनकर्ताओं का उपयोग करके 3 divs का उपयोग करना संभव है .wrapAll? मैं सही समीकरण पर काम नहीं कर सकता।

इसलिए...

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

हो जाता है ...

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

Comments

gist.github.com/3181731 एक अच्छा jQuery प्लगइन बिल्कुल ऐसा करने के लिए। आशा है कि आप इसे उपयोगी पाएंगे।

— iMoses

Answer 1

आप इसे .slice()इस तरह से कर सकते हैं :

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

आप यहां एक डेमो की कोशिश कर सकते हैं , हम सब यहां कर रहे हैं उन तत्वों को प्राप्त कर रहे हैं जिन्हें आप लपेटना चाहते हैं और उनके माध्यम से लूप करना चाहते हैं, .wrapAll()3 के बैचों में कर रहे हैं, फिर अगले 3 पर जा रहे हैं, आदि। यह एक समय में 3 लपेटेंगे। हालांकि कई को अंत में छोड़ दिया जाता है, उदाहरण के लिए 3, 3, 3, 2 यदि ऐसा है तो।

Comments

मैं इसे एक समारोह बनाऊँगा और लिपटे हुए डिवो की संख्या को एक तर्क बनाऊँगा। कुछ इस तरह से लागू होते हैंडिवीग्रुपिंग (divs, divsPerGroup);

— स्टीफन केंडल

वाह! शीघ्र उत्तर के लिए धन्यवाद। चीजों की जोड़ी ... तो, सिर्फ स्पष्टीकरण के लिए - यह nth- बच्चे का उपयोग करना संभव नहीं है? & .. एक पूर्ण jQuery नौसिखिए के रूप में - मुझे यह कैसे काम करना है? क्या मैं इसे एक jQuery (फ़ंक्शन ($)) में

— लपेटता हूं

@csbourne - नहीं :nth-child()यह करने के लिए अच्छी तरह से यह स्वयं उधार नहीं करता है, यह फोन करने के लिए के रूप में, बस एक में लपेट $(function() { });अगर आप इसे पर चलाना चाहते हैं document.ready, अन्यथा यह फोन जब आप इसे चलाना चाहते हैं :)

— निक Craver

शानदार मदद और मार्गदर्शन के लिए धन्यवाद निक - पूरी तरह से काम करता है।

— सीएसबेलोन जूल

@Fahad, NickCraver लॉजिक के अनुसार, आप बस कोड का थोड़ा टुकड़ा संपादित कर सकते हैं var divs = $("div > .classname");या var divs = $("div .classname");धन्यवाद

Answer 2

मैंने एक सामान्य चंक फंक्शन लिखा है जो इसे करने में आसान बनाता है:

$.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>

Answer 3

द प्लगिन

$(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", "");
    }
});

इसे कैसे उपयोग करे।

EveryWhat()तत्व पर कॉल करें और उस प्रत्येक तत्व के लिए एक संख्या डालें जिसे आप एकत्र करना चाहते हैं।

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

रैपिनर के उद्धरणों को <div class="new" />एक वर्ग और समापन टैग के साथ ठीक से स्वरूपित होना चाहिए । Stackoverflow मुझे यह दिखाने से रोकता है कि यह कैसा दिखता है लेकिन यहाँ एक स्वयं समापन div का लिंक है।

यह कैसा दिखना चाहिए

वह आपके द्वारा निर्दिष्ट हर दूसरी संख्या को लपेट देगा। मैं 1.8.2 jquery का उपयोग कर रहा हूं। इसलिए याद रखें EveryWhat(3)कि हर बार चयनकर्ता कॉल और एक नंबर का उपयोग करें । बेशक इसे पेज के निचले हिस्से में रखना या इसमें लपेटना

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

आप प्रत्येक nth का उपयोग कर सकते हैं और फिर .wrapInner('<div class="new" />')उसी परिणाम के लिए।

Comments

आप पहले से ही ऐसा कर सकते हैं $('div > div:nth-child(3n)')और वास्तव में तीन तत्वों के दो समूहों में परिणाम नहीं करता है।

— जेक

Answer 4

यहाँ निक के ऊपर का अधिक प्रयोग करने योग्य संस्करण है:

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

आप इस तरह का उपयोग करेंगे:

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

खिड़की को आपके हैंडलर्स नेमस्पेस से बदला जाना चाहिए।

अपडेट किया गया: एक थोड़ा बेहतर संस्करण जो jQuery का लाभ उठाता है

(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);

उपयोग की तरह:

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

आवरण नाम के लिए दूसरा पैरामीटर वैकल्पिक है।

Answer 5

$(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 = []
                }
            });
        }
    }
});

मैंने काइल के प्लगइन विचार को लिया और इसे स्वचालित रूप से लपेटने और दो तर्क लेने के लिए बढ़ाया। यह मेरे साथ शुरू करने के लिए काम नहीं किया था, लेकिन मैं इसे कोड के लिए कुछ संपादन और परिवर्धन के साथ चल रहा था।

फ़ंक्शन को लागू करने के लिए केवल उस मूल तत्व का उपयोग करें जिसे आप लपेटना चाहते हैं और फिर अपने तर्क निम्नानुसार सेट करें।

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

पहला तर्क यह है कि आप कितने तत्वों को एक साथ लपेटना चाहते हैं और दूसरा तर्क वह तत्व प्रकार है जिसे आप लपेटना चाहते हैं।

आप चर के तहत मुख्य फ़ंक्शन में रैपिंग तत्व के वर्ग को बदल सकते हैं wrapClass।

Answer 6

मैंने इस उत्तर को एक और प्रश्न के लिए तैयार किया है जो इस एक का डुप्लिकेट था। तो शायद मेरा वेरिएंट किसी एक के लिए उपयोगी होगा:

मुझे लगता है कि सभी तीन तत्वों को लपेटने का उपाय है:

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)

मैंने कुछ सुधारों के साथ jsbin पर एक ही कोड लिखा है http://jsbin.com/necozu/17/ या http://jsbin.com/necozu/16/