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

当我的页面加载时，内容从PHP数据库中提取并填充到多个Bootstrap .col-xs-3列中，全部在一个.row内。在页面加载后动态插入HTML（并在按键后更改）

不过，我需要在页面加载，也对keyup后以关闭.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>

而我需要它，像这样：

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

编辑：我刚刚意识到，我的代码，甚至不采取考虑去除其他行在正确的地方，然后再重新将它们添加每按一次键...

来源

2016-07-15 mpdc

第一，你忘了 “”在类选择器“col-flex” –

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

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

来源

2016-07-15 11:37:13 gaetanoM

这对'（document）.ready（）'很有用，谢谢。但是，它只添加行，这意味着当使用搜索栏时，越来越多的行被添加，但是没有任何行被删除！我尝试使用'$（'。col-flex）.unwrap（）'在重新添加它们之前删除所有行，但这不起作用... – mpdc

@mpdc您说得对。我忘了正确的测试：if（（（index + 1）％4 == 0）&&（$（this）.siblings（）。length！= 3））{让我知道你是否仍然有问题。非常感谢 – gaetanoM

你可以看看我的JSFiddle，看看这是用搜索功能实现时出了什么问题吗？ https://jsfiddle.net/n69b49v3/例如，搜索“MET”并查看行无法正确形成。 – mpdc

你可以从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); 

}

来源

2016-07-15 11:33:01 kapantzak

我试图实现它这样。这可以帮助你。

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

来源

2016-07-15 11:53:11

在这里添加一些示例代码。该参考链接将来可能会更新。 – Jay

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

回答

相关问题