jquery - 线程 CSS li

Question

我正在尝试解决我的困境之一，即对消息进行分组，例如:

$("li").each(function() {
  $(this).addClass("thread");
});

.him {
  background-color: rgba(240, 255, 183, 1);
  border-radius: 10px;
  box-shadow: 2px 2px 3px 0 #d0d0d0;
  padding: 10px;
}
.me {
  background-color: rgba(123, 245, 23, 1);
  border-radius: 10px;
  box-shadow: 2px 2px 3px 0 #d0d0d0;
  padding: 10px;
}

<ul>
  <li class="him">hello</li>
  <li class="me">hello</li>
  <li class="me">how are you?</li>
  <li class="me">please answer!!</li>
  <li class="him">sorry was away</li>
  <li class="him">hello</li>
  <li class="me">hello</li>
  <li class="me">how are you?</li>
  <li class="him">hello</li>
  <li class="me">hello</li>
  <li class="me">how are you?</li>
  <li class="me">please answer!!</li>
  <li class="him">sorry was away</li>
</ul>

我希望，如果例如 class me 有更多的 li 它成为一个线程，那么第一个将只有顶部圆 Angular 内部将没有并且最后一个将具有底部圆 Angular class .me 和 .him

我自己尝试了很多，但无法弄清楚如何去做，即使使用 jquery 因为我可以获得线程类，但在每个线程类上。

我想要这个结果

.me1 {

  background-color: rgba(123, 245, 23, 1);

  border-radius: 10px 10px 0 0;

  box-shadow: 2px 2px 3px 0 #d0d0d0;

  padding: 10px;

}

.me2 {

  background-color: rgba(123, 245, 23, 1);

  border-radius: 0;

  box-shadow: 2px 2px 3px 0 #d0d0d0;

  padding: 10px;

}

.me3 {

  background-color: rgba(123, 245, 23, 1);

  border-radius: 0 0 10px 10px;

  box-shadow: 2px 2px 3px 0 #d0d0d0;

  padding: 10px;

}

<ul>
  <li class="me1">hello</li>
  <li class="me2">how are you?</li>
  <li class="me3">please answer!!</li>
</ul>

Answer 1

您可以使用一些 CSS 样式。

只需定位直接兄弟选择器，您就可以为第二次出现的me 或him 赋予不同的外观

顶 Angular 很简单。

前一个元素的底 Angular 比较难，我用一点边距技巧解决了。

$("li").each(function() {
  $(this).addClass("thread");
});

.him {
  background-color: rgba(240, 255, 183, 1);
  border-radius: 10px;
  box-shadow: 2px 2px 3px 0 #d0d0d0;
  padding: 10px;
}
.me {
  background-color: rgba(123, 245, 23, 1);
  border-radius: 10px;
  box-shadow: 2px 2px 3px 0 #d0d0d0;
  padding: 10px;
}
.me + .me {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;  
  margin-top: -10px;
  padding-top: 20px; 
}
.him + .him {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;    
  margin-top: -10px;
  padding-top: 20px; 
}

<ul>
  <li class="him">hello</li>
  <li class="me">hello</li>
  <li class="me">how are you?</li>
  <li class="me">please answer!!</li>
  <li class="him">sorry was away</li>
  <li class="him">hello</li>
  <li class="me">hello</li>
  <li class="me">how are you?</li>
  <li class="him">hello</li>
  <li class="me">hello</li>
  <li class="me">how are you?</li>
  <li class="me">please answer!!</li>
  <li class="him">sorry was away</li>
</ul>