jQuery检查元素是否具有同级

时间:2018-10-08 23:00:37

标签: jquery html

我需要你的小费。我有一张桌子,每一行都有按钮。有时该行可以有一个按钮,有时可以有两个按钮。现在,我正在尝试设置一个类,该类在左按钮(如果有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');
}

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

enter image description here

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

2 个答案:

答案 0 :(得分:4)

您这里不需要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添加到帖子中,我可以相应地调整答案。

答案 1 :(得分:1)

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