Question

我正在尝试为动态生成的帖子制作网格。第一个帖子应该是全宽的，所有后续帖子应该是半宽的（因此它们形成两列。

这是我的HTML：

<div class="row expanded test">
   <div class="large-6 columns" style="background-color: blue;">One</div>
   <div class="large-6 columns" style="background-color: yellow;">Two</div>
   <div class="large-6 columns" style="background-color: green;">Three</div>
</div>

我试过这个jQuery脚本，但它不起作用：

$('.test > div').each(function() {    
    $this = $(this);        
    if ($this.is(':first-child')) {
        $this.replaceClass('large-12 columns'); 
    } 
    if ($this.is(':last-child')) {
        $this.addClass('end'); 
    }
});

知道怎么解决吗？提前谢谢。

Answer 1

尝试将$('.tester > div')更改为$('.test > div')。

您只有test类的div。

此外，没有jQuery replaceClass（）方法。您必须使用.removeClass()和.addClass()方法。

removeClass（）方法从匹配元素集中的每个元素中删除单个类，多个类或所有类。

addClass（）方法将指定的类添加到匹配元素集中的每个元素。

＆＃13;

$('.test > div').each(function() {

    $this = $(this); 

    if ($this.is(':first-child')) {
        $this.removeClass().addClass('large-12 columns'); 
    } 
    if ($this.is(':last-child')) {
        $this.addClass('end'); 
    }
});

＆＃13;

.large-6{
  width:60px;
}
.large-12{
  width:100px;
 }
.end{
  width:150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row expanded test">
      <div class="large-6 columns" style="background-color: blue;">One</div>
      <div class="large-6 columns" style="background-color: yellow;">Two</div>
      <div class="large-6 columns" style="background-color: green;">Three</div>
</div>

＆＃13;

Answer 2

嗨请使用下面的代码然后你会得到确切的输出

<div class="row expanded test">
   <div class="large-6 columns" style="background-color: blue;">One</div>
     <div class="large-6 columns" style="background-color: red;">
        <div class="large-3 columns" style="background-color: yellow;width:302px;float:left">Two</div>
        <div class="large-3 columns" style="background-color: green;width:301px;float:left">Three</div>  
     </div>  

</div>

jQuery - 按子位置切换类

2 个答案: