[Jquery] Envelopper tous les 3 divs dans un div


Answers

J'ai écrit une fonction de morceau générique qui rend ceci assez facile à faire:

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

Est-il possible d'utiliser nth-child sélecteurs nth-child pour envelopper 3 divs en utilisant .wrapAll ? Je n'arrive pas à trouver la bonne équation.

alors...

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

devient...

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



J'ai préparé cette réponse pour une autre question qui était en double de celui-ci. Alors peut-être que ma variante sera utile pour quelqu'un:

Je pense que la solution pour envelopper les trois éléments est:

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)

J'ai écrit le même code à jsbin avec quelques améliorations http://jsbin.com/necozu/17/ ou http://jsbin.com/necozu/16/




Voici une version plus utilisable de Nick ci-dessus:

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

Vous utiliseriez ceci comme:

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

fenêtre devrait être remplacé par votre espace de noms Handlers, bien sûr.

Mise à jour: Une version légèrement meilleure qui utilise 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);

Utilisez comme:

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

Le second paramètre du nom de l'encapsuleur est facultatif.






Links