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

Question

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

但是，我需要关闭 .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 对新行进行硬编码，因为用户在搜索栏中的输入可能会将可见页面内容更改为以下内容，我需要这些行在正确的位置动态关闭（请注意 4 是如何丢失的：

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

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

$(document).ready(function() {
    function rowBreak() {
        var columnCount = 0;
        $('col-flex:visible').each(function() {
            columnCount++;
            if (columnCount % 4 == 0) {
                $(this).append('</div><div class="row">');
            }
        });
    }
    rowBreak();
    $("#search").on("keyup", function() {
        rowBreak();
    });
});

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

Answer 1

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

HTML

<input id="hidden_myPHPdata" type="hidden">
<div id="markupHolder"></div>

PHP - 数据数组

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

Javascript

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

}

Answer 2

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

$(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 3

我试过这样实现。对你有帮助吗

访问此 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() ); });

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

Dynamically insert HTML after page load (and change after key press)

javascript

jquery

append

document-ready