如果内容超过第一个 div，如何将内容添加到下一个 div

Question

我想在一个中添加 5 个类别 div。目前我正在将所有功能合二为一 div。在添加更多类别时，我希望它们显示在下一个 div 中。任何人都可以帮助我如何做到这一点。这是我想要实现的

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

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

Answer 1

jquery mock-up 下面。这是基于具有相同类名的三列。它循环通过第一列并将列表项相应地放入下一列和后续列。 fiddle 和 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>

如果内容超过第一个 div，如何将内容添加到下一个 div

how to add content to next div if its exceeding in the first div

javascript

php

jquery

codeigniter

codeigniter-3