如何在Javascript中重新排序子标记?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (72)

我试图用Javascript重新排序两个元素,这样一个元素就会出现在另一个元素后面。我使用Wordpress插件模板,这就是为什么我不能修改原始模板文件。

下面是我正在使用的HTML:

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

我希望视图按钮出现在“取消”按钮之前。

下面是我为交换两个a标记而创建的javascript函数,但它似乎不起作用。

function myscript() {
    $(".view").insertAfter(".cancel");
}
提问于
用户回答回答于

只需切换选择器的位置。cancel链接后,$(".view").insertAfter(".cancel")将会插入在view链接;view链接后,$(".cancel").insertAfter(".view")会插入在cancel链接。

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>

用户回答回答于

试一试:

$(function() {
  let cancelButton = $("a.button.cancel");
  let viewButton = $("a.button .view");
  cancelButton.insertAfter(viewButton);
  viewButton.insertBefore(cancelButton)
});
<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>

扫码关注云+社区

领取腾讯云代金券