javascript - 在页面加载后动态插入 HTML(并在按键后更改)

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