在頁面加載後動態插入HTML（並在按鍵後更改）

Question

當我的頁面加載時，內容從PHP數據庫中提取並填充到多個Bootstrap .col-xs-3列中，全部在一個.row內。

不過，我需要在頁面加載，也對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(); 
    }); 
}); 

編輯：我剛剛意識到，我的代碼，甚至不採取考慮去除其他行在正確的地方，然後再重新將它們添加每按一次鍵...

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

你可以從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 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()); });