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

Question

我想在一个 div 中添加 5 个类别。目前我正在将所有内容集中在一个 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 模型。这是基于具有相同类名的三列。它循环遍历第一列，并将列表项相应地移至下一列和后续列。 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>