Diviser un certain nombre de div dans les blocs

que je dois avoir converti enDiviser un certain nombre de div dans les blocs

<div id="WhateverHolder"> 

<div class="block"> 
<div class="item first"></div> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item last"></div> 
</div> 

<div class="block"> 
<div class="item first"></div> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item last"></div> 
</div> 

</div>

J'ai cherché un plugin qui peut le faire mais sans prévaloir quelle est la façon la plus facile de le faire dans jQuery

Source

2010-08-06 nokiko

Bienvenue sur SO! S'il vous plaît, prenez votre temps et apprenez comment ça fonctionne. Par exemple dans les cases à côté du champ de saisie ou sur http://stackoverflow.com/editing-help est décrit comment formater le code correctement (de sorte que vous pouvez éviter "d'échapper personnalisé" avec '[]';)) –

cela ne fonctionne que pour 8 éléments ou devrait-il évoluer? –

Le contenu de '# WhateverHolder' est-il toujours de sorte qu'il peut être divisé de façon égale en blocs? Que faire si seulement 7 'div' sont contenus? Si le dernier bloc contient par ex. 3 'div' s alors? Ou voulez-vous toujours créer deux blocs? Vous devez expliquer le modèle sur lequel votre division est basée! –

Vous pouvez utiliser la fonction jQuery .slice(...):

http://api.jquery.com/slice/

var items = $("#WhateverHolder > div.item"); 

var blockCount = 4; 

for (var i = 0; i < items.length; i+= blockCount) { 
    var slice = items.slice(i,i + blockCount);  

    slice.first().addClass('first'); 
    slice.last().addClass('last'); 

    slice.wrapAll("<div class=\"block\"></div>"); 
}

Il fera un nouveau bloc sur l'élément nine'th . Et sinon faites-le exactement comme vous voulez avec les première et dernière classes.

Source

2010-08-06 08:22:09

C'est plus facile avec: lt et: gt sélecteurs. – Dorian

@Dorian Aussi, si elle doit évoluer vers les éléments X? –

Je ne sais pas, mais oui, après 2 blocs, c'est plus facile avec tranche. – Dorian

-1

var MAX_CHILDREN_PER_BLOCK = 4; 
var parent = $('#WhateverHolder'); 
var currentBlock; 
parent.find('.item').each(function() { 
    if (!currentBlock) { 
     currentBlock = $('<div class="block"></div>'); 
     currentBlock.appendTo(parent); 
    } 
    $(this).appendTo(currentBlock); 
    if (currentBlock.children().size() == MAX_CHILDREN_PER_BLOCK) { 
     currentBlock = null; 
    } 
}); 
parent.find('.block').each(function() { 
    $(this).find('.item:first').addClass('first'); 
    $(this).find('.item:last').addClass('last'); 
});

Edit: Testé et bug a été résolu expliqué dans les commentaires

Source

2010-08-06 08:20:24 ggarber

Également testé celui-ci, la partie bloc fonctionne mais quand j'essaie avec un enfant par bloc de 3, sur le dernier bloc (celui qui a seulement – nokiko

Vous avez raison, j'ai résolu ce problème et l'ai testé au cas où vous voulez utiliser le code – ggarber

Vous pouvez utiliser selectors (vous pouvez améliorer cela):

place = $('#WhateverHolder') 
place.find('div:lt(4)').wrapAll('<div class="block" />') 
place.find('div:gt(4)').wrapAll('<div class="block" />') 
place.find('.block').each(function (i, e) { 
    e = $(e) 
    e.find('div:first').addClass('first') 
    e.find('div:last').addClass('last') 
});

Modifier: It Works (avec votre exemple)! (Il est facile de rendu plus flexible (avec .each() et .slice())

Source

2010-08-06 08:22:17 Dorian

-2

Here're mes 2 cents.

var listItemsPerList = 10; 
var listItems = $("#WhateverHolder > div").length; 

for (var i = 0; i < Math.round(listItems/listItemsPerList); i++) { 
    var startingItem = i * listItemsPerList; 
    var endingItem = (i + 1) * listItemsPerList; 
    if (endingItem > listItems) { endingItem = listItems }; 
    $("#WhateverHolder > div").slice(startingItem, endingItem).wrapAll("<div class="block"></div>"); 
} 

$("#WhateverHolder").replaceWith($("#WhateverHolder").children());

Source

2010-08-06 08:23:49

this on ne semble pas travailler avec si je fais 4 alors il met les 4 premiers dans un bloc puis 3 normal et ensuite il a mis le dernier dans un bloc à nouveau – nokiko

Aham, je suppose que vous n'aimez pas ajuster et déboguer des choses? Juste copier/coller? Nevermind ... –

Utilisez jQuerys .slice() et .wrapAll() méthode pour accomplir cette tâche

$(function(){ 
    var $set = $('.item'); 

    for(var i = 0, len = $set.length; i < len; i+=4){ 
     $set.slice(i, i+4).wrapAll('<div class="block"/>'); 
    } 
});

Ce enveloppait chaque fourdiv.item éléments en onediv.block.

Voir: .wrapAll(), .slice()

Exemple: http://jsbin.com/ahuvu3/edit

Source

2010-08-06 08:39:44 jAndy

ok merci, celui-ci fonctionne et crée le html nécessaire – nokiko

Il ne crée pas la première et dernière classe ... –

Diviser un certain nombre de div dans les blocs

Répondre

Questions connexes