jquery pour envelopper des éléments

J’ai mis en place ce plugin qui fait le travail bien

 (function($){ $.fn.wrapChildren = function(options) { var options = $.extend({ childElem : undefined, sets : 1, wrapper : 'div' }, options || {}); if (options.childElem === undefined) return this; return this.each(function() { var elems = $(this).children(options.childElem); var arr = []; elems.each(function(i,value) { arr.push(value); if (((i + 1) % options.sets === 0) || (i === elems.length -1)) { var set = $(arr); arr = []; set.wrapAll($("<" + options.wrapper + ">")); } }); }); } })(jQuery); 

Vous passez dans un object d’options définissant

• childElem – l’élément nodeType des enfants immédiats à envelopper
• sets – comment vous souhaitez regrouper les éléments enfants. Par exemple, des ensembles de 3 dans votre cas. La valeur par défaut est 1
• wrapper – l’élément dans lequel insérer les éléments enfants. la valeur par défaut est

Utilisez comme tel sur vos données de test.

 $(function() { $('#ensortinges').wrapChildren({ childElem : 'a' , sets: 3}); }); 

Voici une démo de travail pour jouer avec. Ajoutez / modifiez l’URL pour jouer avec le code.

MODIFIER:

Je suis tenté de transformer cela en un plugin plus complet, si cela s’avère utile. .

J’ai créé une version améliorée du plugin

Un travail puissant et peut-être pas la chose la plus intelligente à faire:

 var $ensortinges = $("#ensortinges"); var $div = $('
').appendTo($ensortinges); while($div.next().length > 0){ $div.append($div.nextAll().slice(0,3)); $div = $('
').appendTo($ensortinges); } 

Appliquez une classe à chaque “sous-div” qui remplit le contenu horizontalement et donnez-lui clrar: both; comme css asortingbute, et il affichera comme vous le souhaitez. Si vous souhaitez l’afficher verticalement, appliquez float: left; au lieu.

 var $c = $('#ensortinges'); while ($c.children('a').length) { $c.children('a:lt(3)').wrapAll('
'); } 

démo de travail (bien que avec une structure HTML différente) sur http://jsfiddle.net/alnitak/sppgP/