0
votes

I am fetching a list of items from MongoDB and it displays one item per line.

But i want to display x (e.g. 3) items per Line instead of just 1. How can i achieve this? Shall i use a table?

Current output with unordered list:

-item1 -item2 -item3 -...

Achieved output:

item1 item2 item3

item4 item5 item6

item7 item8 item9

2

2 Answers

1
votes

You could do something like this, assuming you have a table in your markup:

$.each(yourListOfItems, function(index, value){

    var tRow = $('<tr>');

    for (var i = 0; i < 3; i ++){
        var tCell = $('<td>');
        tCell.text(value);
        tRow.append(tCell)
    }

    $(#yourTableID).append(tRow)
});
0
votes

Actually i thought to complicated on this topic and didn't consider, that divs can solve my task:

  • one div-container (about 610px, let's name it deviceWrapper)
  • x child divs (name: device) --> so 2 devices per line are organised

#deviceWrapper{
    position: relative;
    padding-top: 5px;
    width: 610px;
    overflow: hidden;
    background-color: #eee;
    padding-left: 5px;
    border: 5px;
}

.device{
    width: 300px;
    height: 200px;
    margin-bottom: 5px;
    margin-right: 5px;
    float: left;
    overflow: hidden;
    background-color: aqua;
}