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模拟。这基于具有相同类名的三列。它循环遍历第一列，并相应地将列表项颠倒到下一列和后续列中。小提琴和css中评论的步骤需要根据您的情况进行调整。

＆＃13;

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
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: