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

当我的页面加载时，内容通过PHP从数据库中提取，并填充在许多引导

.col-xs-3

列中，所有这些列都位于单个

.row

中

但是，我需要关闭

.row

，并在页面加载后，使用JavaScript/jQuery每隔四列启动一个新的，同时在

键控上，将相关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>

这是我现在的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();
    });
});

$（文档）.ready（函数（）{
函数rowBreak（）{
var-columnCount=0；
$（'col-flex:visible'）。每个（函数（）{
columnCount++；
如果（columnCount%4==0）{
$（此）。附加（“”）；
}
});
}
rowBreak（）；
$（“#搜索”）。在（“键控”，函数（）上{
rowBreak（）；
});
});

编辑：我刚刚意识到，我的代码甚至没有考虑在每次按键将额外的行重新添加到正确的位置之前删除这些行…
您可以从PHP构建一个对象来保存数据并在加载时构建所有标记：

HTML

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

}

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

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


艾克莱姆
埃米特
阿美
APMG
ATCN
米计
MMC 2016
卫星通信2016
我尝试过这样实现它。愿这对你有帮助

访问这个

HTML:


1.
2.
3.
4.
5.
6.
3.
4.
5.
6.
7.
放在这里

JS:

函数abc（）{var count=0；var output=''；
$（'.col flex'）。每个（函数（）{
如果（计数%4==0）{
输出+=''；
}
计数++；
输出+=''；
输出+=$（this.text（）；
输出+=''；
如果（计数%4==0）{
输出+=''；
}
});
如果（计数%4！==0）{
输出+=''；
}
返回输出；}$（文档）.ready（函数（）{$（'#输出'）.append（abc（））；}）；
首先，您忘了在类选择器“col flex”中添加一些示例代码。此参考链接将来可能会更新。这对
（document）.ready（）非常有用，谢谢。但是，它只会添加行，这意味着在使用搜索栏时，会添加越来越多的行，但不会删除任何行！我尝试使用
$（'.col flex）.unwrap（）
在重新添加行之前删除所有行，但这不起作用…@mpdc您是对的。我忘记了正确的测试：if（（（索引+1）%4==0）和（$（this.sibbines（）.length！=3））{如果您仍然有问题，请告诉我。非常感谢。请查看我的JSFIDLE，看看在使用搜索功能实现时出现了什么问题？例如，搜索
MET
，查看行的格式是否正确。这是使用我的
unwrap（）
尝试更新的：（尝试搜索相同的
MET
）@mpdc代码段，并使用JSFIDLE中的代码进行更新。因为在keyup事件处理程序中隐藏了元素，所以搜索必须是隐藏元素，…。我希望这能解决您的问题。您能接受并向上投票吗？谢谢。
<input id="hidden_myPHPdata" type="hidden">
<div id="markupHolder"></div>

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

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

}

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

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

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

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