Разбейте одну строку с помощью jQuery каждый [Bootstrap | JSON]

Я довольно новичок в jQuery, и у меня есть вопрос, который беспокоит меня в последнее время.

Я использую jQuery + Bootstrap + JSON для создания страницы и вывода результатов в Bootstrap Grid. Я не знаю, как это описать, но я постараюсь написать это в коде.

Вот что я хочу добиться на выходе.

<div id = "appendClasses">
<div class = "row">
<div class = "col-md-4"><p>Party 1</p></div>
<div class = "col-md-4"><p>Party 2</p></div>
<div class = "col-md-4"><p>Party 3</p></div>
</div>
<div class = "row">
<div class = "col-md-4"><p>Party 4</p></div>
<div class = "col-md-4"><p>Party 5</p></div>
<div class = "col-md-4"><p>Party 6</p></div>
</div>
</div>

У этого списка нет конца.

У меня есть HTML, как это.

<div id = "appendClasses"></div>

И jQuery для создания HTML и внедрения его в #appendClasses,

$.getJSON(partyURL, function(partyURLResponse) {
    var partyHTML = '';
$.each(partyURLResponse.data, function(partyIdx, party) {
        /*optional stuff to do after success */
       partyHTML += '<div class = "row">';
       partyHTML += '<div class = "col-md-4">';
       partyHTML += '<p>' + party.id + '</p>';
       partyHTML += '</div>';
       partyHTML += '</div>';
        partyHTML += '</div>';
    });
    $('#appendClasses').html(partyHTML);
  });

Вот как это выводит.

<div id = "appendClasses">
<div class = "row">
<div class = "col-md-4"><p>Party 1</p></div>
</div>
<div class = "row">
<div class = "col-md-4"><p>Party 2</p></div>
</div>
<div class = "row">
<div class = "col-md-4"><p>Party 3</p></div>
</div>
<div class = "row">
<div class = "col-md-4"><p>Party 4</p></div>
</div>
<div class = "row">
<div class = "col-md-4"><p>Party 5</p></div>
</div>
<div class = "row">
<div class = "col-md-4"><p>Party 6</p></div>
</div>
</div>

Таким образом, он показывает результаты в одной строке без сетки. Как я могу это исправить?

Источник

3 ответа

Решение

В своем текущем коде вы добавляете <div class='row'> Для каждой стороны вы можете решить ее, тщательно посчитав текущий идентификатор, и:

  1. Когда текущий индекс находится в начале строки, выполните partyHTML += '<div class = "row">';
  2. Когда элемент строки заполнен или цикл заканчивается не пустой строкой, выполните partyHTML += '</div>'; закрыть это.

Например:

var count = 0;
var item_per_row = 3;
$.each(partyURLResponse.data, function(partyIdx, party) {
   /*optional stuff to do after success */
   if (count === 0) { // Start of a row
    partyHTML += '<div class = "row">';
   }
   partyHTML += '<div class = "col-md-4">';
   partyHTML += '<p>' + party.id + '</p>';
   partyHTML += '</div>';

   ++count;
   if (count === item_per_row) {  // End of row
    partyHTML += '</div>';
   }

   // It seems you mistakenly closed one more div in loop
   // is it a typo?
   // partyHTML += '</div>';
});
if (count > 0) {  // Close the last row if it exist.
  partyHTML += '</div>';
}

$('#appendClasses').html(partyHTML);

Тем не менее, было бы трудно поддерживать, поскольку вы используете простой текст для управления кодом (как вы, кажется, добавляете еще один </div> в каждой итерации), так как вы используете jQuery, я бы посоветовал вам использовать его apis для управления элементами dom и их атрибутами... и т. д., которые было бы проще поддерживать и делать будущие изменения.

var parties = [
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 5}
];
// Items per row.
var items_per_row = 3;
// current item counts in a row.
var item_count = 0;

// Create a row to place the created divs
var $row = $('<div>').addClass('row');

// Get target to place these items.
var $target = $('#appendClasses');
$.each(parties, function(partyIdx, party) {
  /*optional stuff to do after success */
  // Just use jquery's function to create the dom elements would be more clear.
  
  var div = $('<div>');            // Create div.
  
  var p = $('<p>').text(party.id);  // Create p and add text to it.
  div
    .addClass('col-md-4')     // add class `col-md-4` to div
    .append(p)                         // append the p to the div
    .appendTo($row);           // append the div to the row.
  
  ++item_count;
  
  // When item count reach limit, append row to target
  // and create a new row for later elements.
  if (item_count === items_per_row) {    
    $row.appendTo($target);
    $row = $('<div>').addClass('row');
    item_count = 0;
  }
});

if (item_count > 0) {
  $row.appendTo($target);
}
.row {
  margin-bottom: 10px;
  border: solid 1px blue;
  padding: 10px;
  width : 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "appendClasses"></div>

Источник

Вы можете использовать друг друга в каждом теле, когда структура json будет такой, как здесь, - мой быстрый код. И вы можете вернуться из массива серверов, тогда будет неплохо разобрать и отобразить его так, как вам нужно.

[
  [{id: 1}, {id: 2}, {id: 3}],
  [{id: 4}, {id: 5}, {id: 6}]
]

и тогда этот код будет хорошо работать:

$.each(partyURLResponse.data, function(partyIdx, party) {
    /*optional stuff to do after success */
    partyHTML += '<div class = "row">';

    $.each(party, function(id, item) {
      partyHTML += '<div class = "col-md-4">';
      partyHTML += '<p>' + item.id + '</p>';
      partyHTML += '</div>';
    });

    partyHTML += '</div>';
  });

  $('#appendClasses').append(partyHTML);
});
Источник

Вот еще один способ с минимальным кодом. Я оставил встроенные комментарии, чтобы обозначить, что делает каждая строка.

var parties = [{id: 'p1'},{id: 'p2'},{id: 'p3'},{id: 'p4'},{id: 'p5'},{id: 'p6'}],
 //Create empty containers for later use
 $html = $rows = $(),
 //Break limit
    colsPerWrap = 3;

$.each(parties, function(partyIdx, party) {
 //Create a jQuery object with the desired content
    var $col = $("<div/>", {
        'class': 'col-md-4',
        'html': '<p>' + party.id + '</p>'
    });
 //Add the created object to the container
    $rows = $rows.add($col);
 //At every break limit
    if ( (partyIdx+1) % colsPerWrap === 0 ) {
     //Append the cols to the inner wrapper
        var $wrap = $("<div/>", { 'class': 'row' });
        $wrap.append($rows);
     //Empty the container for the next iteration
        $rows = $();
     //Populate the container with each inner wrapper
        $html = $html.add($wrap);
    }
});
//Always append outside the loop as DOM scan is expensive!
$('#appendClasses').empty().append($html);
.row {
    border: 1px solid green;
    margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "appendClasses"></div>

Источник
Другие вопросы по тегам