小编Sta*_*ter的帖子

我有一个动态生成图像的引导网格.

如果最后一个元素在行中是唯一的,那么它应该居中.如果行中有两个元素,则第二个元素应该向右浮动.

这就是我要的:

行中的两个元素:

A   B   D
E   F   G
H       I

行中的一个元素:

A   B   D
E   F   G
    H    

HTML代码:

<div class="row">
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>  
</div>

这就是我得到的:

行中的两个元素:

A   B   D
E   F   G …

我有一个列表,我想在每个第二个元素中添加类,从第一个元素开始计算.

这是我的清单

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
</ul>

我希望这样:

<ul class="timeline">
  <span class="topbullet"></span>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
  <li class="odd"></li>
  <li class="even"></li>
  <div class="clearfix"></div>
</ul>

这是我的jQuery代码

$(".timeline li:nth-of-type(2n)").addClass('even');

添加'偶数'类没有问题,但是如何添加'奇数'类？我应该使用哪个选择器来计算第一个列表元素？

我有一个引导程序网格，其中内容是动态加载的。如果最后一个元素在行中单独存在，则应居中。

我想要的是：

A   B
C   D
E   F
  G

HTML代码：

A   B
C   D
E   F
  G

div {
  border: 1px solid red;
}

我得到了什么：

A   B
C   D
E   F
G   

我用 css selector 试过了:nth-last-of-type()，但是有了这个选择器，每个“最后一个元素”都会得到属性。

有人知道怎么做吗？我希望我能用你能理解的方式来解释它。

我有一个列表,我想在每个第二个列表元素后添加一个div .我的问题是第一个元素是span.

我希望这样:

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
</ul>

但我得到这样的:

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
</ul>

这是我使用的JQuery代码:

$(document).ready(function(){
    $(".timeline li:nth-child(2n)").add('.timeline li:last').after("<div class='clearfix'></div>");
})