Javascript jede N-te, erstellen neue Zeile

Habe ich eine Produkte-Seite, die ich zeigen möchte 3 Elemente in jeder Zeile und dann, wenn es mehr ist, erstellen Sie eine neue Zeile und mehr anzeigen. Also 3 Spalten pro Zeile mit unbegrenzter Zeilen. Unten ist der code, den ich habe, enthält meine Schleife, die ich nehme an, der code wird gehen müssen in.

$(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++;

        });

Hier ist, wo ich brauche, es zu tun, aber ich bin ein wenig stecken wie, diesen Ansatz. Wenn die Zahl ist teilbar durch 3 ich nehme an, es müssen dann erstellen Sie eine neue Zeile.

Vielen Dank für jede Hilfe oder input, den Sie liefern können.

können Sie Ihre html-und set-up Geige?
Es ist ein Ajax-Aufruf an die Datenbank. Nur die Schleife durch eine XML für alle Produkte. Es wird dann fügen Sie einfach die variable, die Elemente des dom.
Man könnte auch überspringen, hinzufügen der row-fluid div, und fügen Sie einfach die Elemente. Schweben Sie alle Links, und die Größe 3 passen in eine Zeile. Dann die CSS-behandeln Sie das layout, ohne das hinzufügen von Zeilen-div ist. Es sei denn natürlich, Sie WIRKLICH brauchen einen div-container, der für jede Zeile.

InformationsquelleAutor SBB | 2013-09-17

7

Erstens, keine Notwendigkeit, zu behandeln, eine count variable auf Ihre eigenen, die .each() Funktion liefert bereits eine index-element (als optionales argument).

Mit der modulus operator, den Sie bekommen können, der Rest aus der Division der index 3. Dann können Sie sagen, Wann müssen Sie zum drucken der Eröffnung der Reihe und das Ende der es.
```
$(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>';
```
- Dies war für die meisten Teil, jedoch habe ich 4 Datensätze in meine Tabelle und das auch nur, druckte eine Reihe von 3, nicht mein 4. Punkt. Irgendwelche Ideen?
- Finden Sie in der fixed-code
- Never mind, Tabelle Fehler. Dies funktioniert perfekt, vielen Dank!
- der original-code nicht gut im Griff die letzten schließen in Fall, dass die Anzahl der element nicht vollkommen geteilt durch 3. Nehmen Sie den letzten Befehl, bitte.
InformationsquelleAutor Itay
3

Geht nach Links Feld, nicht! Benutzen Sie stattdessen CSS.

Style up your span3 Klasse mit der 30ish % mit einer display inline block. So wenn Sie sich entscheiden, die Anzeige 2, 4 oder 60, - pro Zeile müssen Sie nur ändern Sie die CSS. Dies öffnet auch Sie zum ändern der Anzahl der Elemente pro Zeile mit CSS-media-queries für die verschiedenen viewports, z.B. mobile.

Weiter dieses Weise müssen Sie nicht brauchen, um über die Schließung der Zeile, wenn Ihre Einzelteile nicht durch 3 teilbar

On a side note, wenn Sie sich entscheiden, um die CSS-route, ziehen Sie die Verwendung <ul> und <li> statt, als semanticaly Sie haben eine Liste.

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

Update Fiddle aktualisiert, um zu demonstrieren Verwendung von li und die Flexibilität dieses Ansatzes.
- +1 Stimme mit jedem Wort
InformationsquelleAutor Jon P
0

Sollten Sie verwenden E-Modul: http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs. 94).aspx
Es gibt Ihnen ein Rest zurück, der sich aus der Division von zwei zahlen, so könnten Sie wahrscheinlich tun Sie dies mit so etwas wie (in Ihrem .jeder):
```
if(!($(this).index() % 2)){
  //Add your row
}
```
$(this).index() gibt den index Ihrer .each() und % 2 liefert den Rest der Division des index, geteilt durch 2, also die ersten 3 mal läuft es so sein würde:
- 0 /2 = 0 = eine Zeile hinzufügen
- 1 /2 = x, 5 = nicht eine Zeile hinzufügen
- 2 /2 = 1 = nicht eine Zeile hinzufügen
Hoffentlich ist das was du gemeint hast.

InformationsquelleAutor jphase

Hier ist, was ich denke, ist ein sauberer Ansatz:

//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))
    );
}

InformationsquelleAutor Frambot

Den besten Ansatz für Ihr Problem ist die Verwendung von jquery-Vorlage. Holen Sie Ihre Daten im Json-format per ajax-request, und erstellen Sie Zeilen dynamisch von jquery Vorlage:

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

Nicht-Jquery-tmpl veraltet, wie vor 2 Jahren?
Ich denke, es ist ein nützliches tool!

InformationsquelleAutor Super Hornet

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>")
});

Etwas wie funktionieren sollte,

InformationsquelleAutor Alex Art.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.