Question

我正尝试用Javascript对2个元素重新排序，以便一个出现在另一个之后。我使用的是Wordpress插件模板，这就是为什么我不能修改原始模板文件的原因。

这是我正在使用的HTML：

<td class="membership-actions order-actions">
    <a href="#" class="button cancel">Cancel</a> 
    <a href="#" class="button view">View</a>                                 
</td>

我希望查看按钮出现在取消按钮之前。

这是我创建的javascript函数，用于交换两个a标签，但似乎无法正常工作。

function myscript() {
    $(".view").insertAfter(".cancel");
}

Answer 1

尝试一下，让我知道是否有帮助。

obj

$(function() {
  let cancelButton = $("a.button.cancel");
  let viewButton = $("a.button.view");
  //cancelButton.insertAfter(viewButton);
  viewButton.insertBefore(cancelButton)
});

Answer 2

只需切换选择器位置。 $(".view").insertAfter(".cancel")将在view链接之后插入cancel链接，但是$(".cancel").insertAfter(".view")将在cancel链接之后插入view链接。

function myscript() {
    $(".cancel").insertAfter(".view");
}
myscript();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="membership-actions order-actions">
    <a href="#" class="button cancel">Cancel</a> 
    <a href="#" class="button view">View</a>                                 
</td>

如何在Javascript中对子标签重新排序

2 个答案: