javascript - 如果在下一个div中超出内容，如何向下一个div添加内容

我想在一格中添加5个类别。目前，我将全部集中在一个div中。在添加更多类别时，我希望它们显示在下一个div中。有什么可以帮助我该怎么做。这是我想要实现的目标

我知道我可以在col-md-12内创建col-md-4 * 3，但我仍然会在第一格中获得所有类别。

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#jobsByindustry"><b>Jobs By Industry</b></a></li>
  <li><a data-toggle="tab" href="#jobsByCity"><b>Jobs By city</b></a></li>
  <li><a data-toggle="tab" href="#jobsByCompany"><b>Jobs By company</b></a></li>

</ul>

<div class="tab-content">
  <div id="jobsByindustry" class="tab-pane fade in active">
    <div class=" col-md-12 jobsByCategory">
          <?php if (isset($industries)): ?>
          <?php foreach ($industries as $industry): ?>
           <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $industry->industry_id; ?>"><?php echo $industry->industry_name; ?></a><br>
          <?php endforeach ?>
          <?php endif ?>
      </div>
  </div>

  <div id="jobsByCity" class="tab-pane fade">
    <div class="col-md-12 jobsByCategory">
          <?php if (isset($cities)): ?>
          <?php foreach ($cities as $city):

           ?>
           <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $city->city_id; ?>"><?php echo $city->city_name; ?></a><br>
          <?php endforeach ?>
          <?php endif ?>
      </div>
  </div>

  <div id="jobsByCompany" class="tab-pane fade">
      <div class=" col-md-12 jobsByCategory">
            <?php if (isset($companies)): ?>
            <?php foreach ($companies as $company): ?>
             <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $company->company_id; ?>"><?php echo $company->company_name; ?></a><br>
            <?php endforeach ?>
            <?php endif ?>
        </div>
  </div>
</div>

最佳答案

下面的jquery模型。这基于具有相同类名的三列。它循环遍历第一列，并将列表项相应地移入下一列和后续列。在小提琴中注释的步骤和CSS必须进行调整以适合您的情况。

var cats = $('.cols').eq(0).find('li'),
  num = 5;

cats.each(function(i) { // cycle through each li
  if (i >= num) { // start after num counts
    var temp = $(this),
      count = Math.floor(i / num); // work out the multiples
    $('.cols').eq(count).append(temp[0].outerHTML); // add this li to the next eligable column
    temp.remove(); // remove it from the first list
  }
});

.cols {
  display: inline-block;
  width: 25%;
  padding-left: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="one" class="cols">
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

<ul id="two" class="cols">

</ul>

<ul id="three" class="cols">

</ul>