Question

如何找到每行的最后一项？每行有4列，每行有border-bottom: 1px solid #CCC;。现在，我希望在行的最后一项上删除边框，然后添加一个类。

这是我的标记。

＆＃13;

<div class="product-wrapper">
  <div class="product-item">Product 1</div>
  <div class="product-item">Product 2</div>
  <div class="product-item">Product 3</div>
  <div class="product-item">Product 4</div>
  <div class="product-item">Product 5</div>
  <div class="product-item">Product 6</div>
  <div class="product-item">Product 7</div>
  <div class="product-item">Product 8</div>
</div>

＆＃13;

Answer 1

为什么不使用纯CSS以及:not和:last-child这样的假选择器？

.product-item:not(:last-child) {
    border-bottom: 1px solid #CCC;
}

<div class="product-wrapper">
    <div class="product-item">Product 1</div>
    <div class="product-item">Product 2</div>
    <div class="product-item">Product 3</div>
    <div class="product-item">Product 4</div>
    <div class="product-item">Product 5</div>
    <div class="product-item">Product 6</div>
    <div class="product-item">Product 7</div>
    <div class="product-item">Product 8</div>
</div>

另外值得注意的是：您的Product 2 div缺少结束标记。

Answer 2

我同意Maximillian认为CSS是可行的方法，但是JS可以使用以下方法：

var last = document.querySelector('.product-item:last-child');
last.className = last.className + " someOtherclass";
last.setAttribute('style', 'border-width:0;');

参考：https://jsfiddle.net/8y4kvm51/1/

查找每行的最后一项

2 个答案: