Javascript chaque nième, créer une nouvelle ligne

J'ai une page de produits que je veux montrer à 3 éléments dans chaque ligne et puis si il a plus de, de créer une nouvelle ligne et de vous en montrer plus. Donc 3 colonnes par ligne avec un nombre illimité de lignes. Ci-dessous le code que j'ai que contient ma boucle, je suppose que le code a besoin pour aller en.

$(data).find('products').each(function() {

            itemName = $(this).find('itemName').text();
            itemDesc = $(this).find('itemDesc').text();
            itemID = $(this).find('id').text();

                items +='<div class="row-fluid">\
                <div class="span3">Col 1</div>\
                <div class="span3">Col 2</div>\
                <div class="span3">Col 3</div>\
                </div>';

            count++;

        });

C'est là que j'ai besoin de le faire, mais je suis un peu coincé sur la façon d'aborder cette. Si le nombre est divisible par 3 je suppose qu'il sera alors nécessaire de créer une nouvelle ligne.

Merci pour toute aide ou d'entrée vous pouvez fournir.

pouvez-vous partager votre code html et configurer violon?
C'est un appel Ajax à la base de données. Juste une boucle dans un XML de tous les produits. Il sera alors simplement ajouter les éléments variables de la dom.
Vous pouvez également ignorer de l'ajout de la ligne fluide de div, et il suffit d'ajouter tous les éléments. Flotter à gauche, et la taille 3 peut tenir dans une rangée. Puis le CSS va gérer la mise en page, sans ajout de ligne div. À moins, bien sûr, vous avez VRAIMENT besoin d'un div conteneur, pour chaque ligne.

OriginalL'auteur SBB | 2013-09-17

  1. 6

    Tout d'abord, pas besoin de gérer un count variable sur votre propre, la .chacun() fonction fournit déjà un l'indice de l'élément (comme un argument facultatif).

    Avec le modulus l'opérateur, vous pouvez obtenir le reste de la division de la index par 3. Alors vous pouvez dire quand vous avez besoin d'imprimer l'ouverture de la ligne et la fin de.

    $(data).find('products').each(function(index) {

    itemName = $(this).find('itemName').text();
    itemDesc = $(this).find('itemDesc').text();
    itemID = $(this).find('id').text();

        if ((index % 3) == 0) items += '<div class="row-fluid">';

        items += '<div class="span3">Col 1</div>';

        if ((index % 3) == 2) items += '</div>';
});

if (items.substr(-12) != '</div></div>') items += '</div>';
    Il a travaillé pour la plupart, cependant, j'ai 4 dossiers dans ma table, et ce uniquement d'imprimer une ligne de 3, na pas ajouter mon 4ème point. Des idées?
    Voir le code fixe
    Jamais l'esprit, erreur de table. Cela a marché parfaitement, merci beaucoup!
    le code d'origine ne gère pas bien le dernier de clôture dans le cas où le nombre d'éléments n'est pas parfaitement divisé par 3. Prendre la dernière commande s'il vous plaît.

    OriginalL'auteur Itay

  2. 3

    Va de gauche, n'en ont pas! Utiliser les CSS à la place.

    Le Style de votre span3 classe d'avoir un avec de 30ish % avec un affichage de inline block. De cette façon, lorsque vous décidez d'afficher 2, 4 ou 60 par ligne il vous suffit de modifier le CSS. Cela aussi vous ouvre de modifier le nombre d'éléments par ligne avec les CSS media queries pour les différentes fenêtres par exemple mobile.

    De plus, de cette façon, vous n'avez pas besoin de s'inquiéter à propos de la fermeture de la ligne lors de vos articles retournés ne sont pas divisibles par 3

    Sur une note de côté, si vous décidez d'aller de l'CSS route, pensez à utiliser <ul> et <li> au lieu de cela, comme semanticaly vous avez une liste.

    http://jsfiddle.net/UKQef/1/

    Mise à jour Violon mis à jour afin de démontrer l'utilisation de li et la souplesse de cette approche.

    +1 d'Accord avec chaque mot

    OriginalL'auteur Jon P

  3. 0

    Vous devez utiliser le module: http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs. 94).aspx
    Il vous donne un reste en arrière de la division de deux nombres, de sorte que vous pourriez probablement faire avec quelque chose comme (à l'intérieur de votre .chaque):

    if(!($(this).index() % 2)){
  //Add your row
}

    $(this).index() renvoie l'index de votre .each() et l' % 2 renvoie le reste de cet indice divisé par 2 pour les 3 premières fois cela fonctionne, ça serait comme ceci:

    • 0 /2 = 0 = ajouter une ligne
    • 1 /2 = .5 = ne pas ajouter une ligne
    • 2 /2 = 1 = ne pas ajouter une ligne

    J'espère que c'est ce que vous voulez dire.

    OriginalL'auteur jphase

  4. 0

    Voici ce que je pense est un nettoyant approche:

    //Map each product to a cell.
var cells = $(data).find('products').map(function() {
    var itemName = $(this).find('itemName').text();
    var itemDesc = $(this).find('itemDesc').text();
    var itemID = $(this).find('id').text();
    return $('<div></div>').addClass('span3').text(itemName+' '+itemDesc+' '+itemID);
});

//Collect the cells into rows.
var rows = [];
for (var i=0, j=cells.length; i<j; i+=3) {
    rows.push(
      $('<div></div>')
        .addClass('row-fluid')
        .append(cells.slice(i,i+3))
    );
}

    OriginalL'auteur Joe Frambach

  5. 0

    La meilleure approche pour votre problème est l'utilisation de jquery template. vous pouvez récupérer vos données au format Json par requête ajax et créer des lignes de manière dynamique en jquery template:

     <script src="jquery.tmpl.js" type="text/javascript"></script>

 <script type="text/javascript">
   $(document).ready(function() {
   var data = [
   { name: "Astor", product: "astor", stocklevel: "10", price: 2.99},
   { name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99},
   { name: "Rose", product: "rose", stocklevel: "2", price: 4.99},
   { name: "Peony", product: "peony", stocklevel: "0", price: 1.50},
   { name: "Primula", product: "primula", stocklevel: "1", price: 3.12},
   { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99},
   ];
   $('#flowerTmpl').tmpl(data).appendTo('#row1');
   });
  </script>

  <script id="flowerTmpl" type="text/x-jquery-tmpl">
   <div class="dcell">
   <img src="${product}.png"/>
   <label for="${product}">${name}:</label>
   <input name="${product}" data-price="${price}" data-stock="${stocklevel}"
   value="0" required />
   </div>
  </script>

    Html:

    <div id="row1" class="drow"></div>
    N'était pas Jquery-tmpl obsolète comme il y a 2 ans?
    Je pense que c'est un outil utile!

    OriginalL'auteur Super Hornet

  6. 0
    var $products = $(data).find('products');
var num_of_rows = Math.ceil($products.length/3)
//Create your rows here each row should have an id = "row" + it's index
$products.each(function(i,val){
    var row_index = Math.ceil(i/3)
    $('#row' + row_index).append("<div>Col"+i%3+"</div>")
});

    Quelque chose comme ça devrait fonctionner

    OriginalL'auteur Alex Art.