Question

当我的页面加载时，内容将从PHP数据库中提取并填充在多个Bootstrap .col-xs-3列中，所有这些都在一个.row内。

但是，我需要关闭.row并在页面加载后使用JavaScript / jQuery 每四列启动一个新列，并在keyup上插入代码所需的相关HTML代码。这是因为页面上的内容量可以根据搜索栏中的用户输入（隐藏某些列）动态更改。

我的页面的HTML结构如下：

<input id="search" type="text"> <div class="row"> <div class="col-xs-3 col-flex">1</div> <div class="col-xs-3 col-flex">2</div> <div class="col-xs-3 col-flex">3</div> <div class="col-xs-3 col-flex">4</div> <div class="col-xs-3 col-flex">5</div> <div class="col-xs-3 col-flex">6</div> </div>

而我需要它：

<input id="search" type="text"> <div class="row"> <div class="col-xs-3 col-flex">1</div> <div class="col-xs-3 col-flex">2</div> <div class="col-xs-3 col-flex">3</div> <div class="col-xs-3 col-flex">4</div> </div> <div class="row"> <div class="col-xs-3 col-flex">5</div> <div class="col-xs-3 col-flex">6</div> </div>

但是，我无法使用PHP对新行进行硬编码，因为搜索栏中的用户输入可能会将可见页面内容更改为以下内容，并且我需要动态地在正确的位置关闭行（请注意{{1缺少）：

4

这是我现在的jQuery，但它似乎不起作用：

<input id="search" type="text"> <div class="row"> <div class="col-xs-3 col-flex">1</div> <div class="col-xs-3 col-flex">2</div> <div class="col-xs-3 col-flex">3</div> <div class="col-xs-3 col-flex">5</div> </div> <div class="row"> <div class="col-xs-3 col-flex">6</div> </div>

编辑：我刚刚意识到，我的代码甚至没有考虑删除额外的行，然后在每个按键重新添加它们的正确位置......

Answer 1

另一种方法是基于以下行的修复：

$(this).append('</div><div class="row">');

这一行应该是：

var nextEles = $('.col-flex:hidden:gt(' + index + ')');
$('<div class="row">').append(nextEles).insertAfter(this.closest('div.row'));

主要是，您的变量columnCount无用。看看each parameters。

我的片段：

function rowBreak() {
  $('.col-flex:hidden').each(function (i, e) {
    if (((i + 1) % 4 == 0) && ($(this).siblings().length != 3)) {
      var x = $('.col-flex:visible:gt(' + i + ')');
      $('<div class="row row-temp">').append(x).insertAfter($(this).closest('div.row'));
    }
  });
}

$(function () {
  rowBreak();
  $('#search').on('keyup', function () {
    $('.col-flex').hide();
    var s = this.value.toLowerCase();
    $('.col-flex').filter(function () {
      return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
    }).show();
    rowBreak();
  });
});

body {
  padding: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




<div class="form-group">
    <input class="form-control" id="search" placeholder="Search...">
</div>
<div class="row">
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">AECLIM</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">AEMET</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">AME</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">APMG</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">ATCN</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">METEOMET</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">MMC 2016</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-flex">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">SATCOM 2016</h4>
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
</div>

Answer 2

我试图像这样实施它。这可能对你有所帮助。

访问此codepen link。

HTML：

<div class="row hidden">
    <div class="col-xs-3 col-flex">1</div>
    <div class="col-xs-3 col-flex">2</div>
    <div class="col-xs-3 col-flex">3</div>
    <div class="col-xs-3 col-flex">4</div>
    <div class="col-xs-3 col-flex">5</div>
    <div class="col-xs-3 col-flex">6</div>
  <div class="col-xs-3 col-flex">3</div>
    <div class="col-xs-3 col-flex">4</div>
    <div class="col-xs-3 col-flex">5</div>
    <div class="col-xs-3 col-flex">6</div>
  <div class="col-xs-3 col-flex">7</div>

</div>
Out put here
<div id="output"></div>

JS：

function abc(){   var count = 0;   var output = '';
    $( '.col-flex' ).each(function(){
        if( count % 4 == 0 ){
          output += '<div class="row">';
        }

      count++;
      output += '<div class="col-xs-3 col-flex">';
      output += $(this).text();
      output += '</div>';
      if( count % 4 == 0 ){
          output +='</div>';
        }
    });
    if( count % 4 !== 0 ){
        output +='</div>';
    }
     return output; } $( document ).ready( function(){   $('#output').append( abc() ); });

Answer 3

您可以从PHP构造一个对象来保存数据并在加载时构建所有标记：

HTML

// Construct at server and send to a hidden field
var data = [[1,2,3,4],[5,6,7,8],[9,10,11,12], ...];

PHP - 数据数组

// You data
var dataSet = $('#hidden_myPHPdata').val();
dataSet = JSON.parse(dataSet);

// Place all your markup in a predefined element
var markupHolder = document.getElementById('markupHolder');

for(var item in dataSet) {

   // Create row div
   var row = document.createElement('div');
   row.className = 'row';

   // Loop through the columns
   for (var col in dataSet[item]) {
     var col = document.createElement('div');
     col.className = 'col-xs-3 col-flex';
     col.innerHTML = dataSet[item][col];
     row.appendChild(col);
   }

   // Append row to markup holder
   markupHolder .appendChild(row);

}

的Javascript

tableHTML

页面加载后动态插入HTML（按键后更改）

3 个答案: