jQuery检查元素是否具有同级

Question

我需要你的小费。我有一张桌子，每一行都有按钮。有时该行可以有一个按钮，有时可以有两个按钮。现在，我正在尝试设置一个类，该类在左按钮（如果有2个按钮的情况下）上设置一个右上角空白，以在它们之间留出一些缝隙。

这是我的代码：

if (jQuery('.woocommerce-orders-table__cell-order-actions a').next('a').length > 1) {
    jQuery(this).addClass('no-arrow margin-right');
} else {
    jQuery(this).addClass('no-arrow');
}

但是现在我遇到的问题是表格看起来像这样：

如您所见，底部的按钮之间没有缝隙。

Answer 1

您这里不需要Java甚至jQuery，仅使用CSS即可轻松解决。使用相邻的同级选择器 button + button，其中说目标按钮紧跟另一个按钮：

div {
  background-color: #f0f0f0;
  font-size: 0;
}

div button {
  margin: 0;
}

div button + button {
  margin-left: 10px;
}

<div>
  <button type="button">Button A</button>
</div>
<hr />
<div>
  <button type="button">Button A</button>
  <button type="button">Button B</button>
</div>
<hr />
<div>
  <button type="button">Button A</button>
  <button type="button">Button B</button>
  <button type="button">Button C</button>
</div>

如您所见，这对于两个以上的按钮也适用。

如果您将HTML添加到帖子中，我可以相应地调整答案。

Answer 2

如果需要，可以使用.siblings（）https://api.jquery.com/siblings/来检查兄弟姐妹。但是，在将所有其他匹配项的margin-right设置为10px（或其他值）之后，使用CSS：last-child选择器将margin-right设置为0，可能会得到更好，更干净的结果。