Question

我正在建立产品清单。我希望其他所有内容都可以上一堂课 :before或:after，或仅.My-clas

<div class="product-single"></div>    
<div class="product-single"></div> <!-- here I need add class -->    
<div class="product-single"></div>    
<div class="product-single"></div> <!-- here I need add class -->

产品将由管理员添加，因此我需要知道如何添加所有其他元素，因为我不知道有多少管理员会将产品添加到那里...

Answer 1

这里不需要jQuery或JavaScript；您可以通过将nth-child选择器与after伪元素组合来定位这些元素：

.product-single {
  background: green;
  height: 100px;
  float: left;
  margin: 10px;
  width: 100px;
}

.product-single:nth-child(even):after {
  content: ':after';
  display: block;
}

<div class="product-single"></div>    
<div class="product-single"></div> <!-- here I need add class -->    
<div class="product-single"></div>    
<div class="product-single"></div> <!-- here I need add class -->

Answer 2

$('.product-single:nth-child(even)').addClass('something');

Answer 3

您可以将odd / even选择器与div一起使用。

$('div:odd').addClass('yourClass');

.yourClass {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-single">1</div>
<div class="product-single">2</div>
<!-- here I need add class -->
<div class="product-single">3</div>
<div class="product-single">4</div>
<!-- here I need add class -->

向其他所有项目添加一个班级

3 个答案: