প্রতি 3 ডিভিডকে একটি ডিভের মধ্যে আবদ্ধ করুন

Question 1

nth-childনির্বাচকরা কি 3 ডিভ ব্যবহার করে মোড়ানো করতে ব্যবহার করতে পারবেন .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>

Question 2

আপনি এটির .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 এ চলে যাওয়া ইত্যাদি It এটি একবারে 3 টি মোড়ানো হবে এবং তবে অনেকগুলি শেষে থাকে, যেমন 3, 3, 3, 2 যদি এটি হয় তবে।

Question 3

আমি একটি জেনেরিক অংশ অংশ লিখেছি যা এটি করা সহজ করে তোলে:

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

স্নিপেট প্রসারিত করুন

Question 4

প্লাগইন

$(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" />');

wrapinner এর উদ্ধৃতিতে <div class="new" />একটি ক্লাস এবং ক্লোজিং ট্যাগ সহ সঠিকভাবে ফর্ম্যাট হওয়া উচিত । স্ট্যাকওভারফ্লো আমাকে দেখতে দেখতে বাধা দেয় তবে এখানে স্ব-বন্ধ হওয়া ডিভের একটি লিঙ্ক।

এটি দেখতে কেমন হওয়া উচিত

এটি আপনার নির্দিষ্ট করে দেওয়া প্রতিটি অন্যান্য সংখ্যা মোড়ানো হবে। আমি jquery 1.8.2 ব্যবহার করছি। সুতরাং EveryWhat(3)প্রতিটি বারের জন্য নির্বাচক কল এবং একটি নম্বর ব্যবহার করুন মনে রাখবেন । অবশ্যই এটি পৃষ্ঠার নীচে রাখা বা এটি এ মোড়ানো

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

আপনি প্রতি নবম এবং .wrapInner('<div class="new" />')একই ফলাফলের জন্য ব্যবহার করতে পারেন ।

Question 5

এখানে নিকের উপরের আরও ব্যবহারযোগ্য সংস্করণটি রয়েছে:

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

মোড়কের নামের জন্য দ্বিতীয় প্যারামিটারটি alচ্ছিক।

Question 6

$(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।

Question 7

আমি এই উত্তরটি অন্য একটি প্রশ্নের জন্য প্রস্তুত করেছি যা এটির সদৃশ ছিল। সুতরাং সম্ভবত আমার রূপটি কারওর জন্য দরকারী হবে:

আমি মনে করি তিনটি উপাদান মোড়ানোর সমাধানটি হ'ল:

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/