我需要你的小费。我有一张桌子,每一行都有按钮。有时该行可以有一个按钮,有时可以有两个按钮。现在,我正在尝试设置一个类,该类在左按钮(如果有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');
}
但是现在我遇到的问题是表格看起来像这样:
如您所见,底部的按钮之间没有缝隙。
答案 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,可能会得到更好,更干净的结果。