我正在尝试用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>
我希望视图按钮出现在取消按钮之前。
下面是我创建的用来交换两个a标签的javascript函数,但它似乎不起作用。
function myscript() {
$(".view").insertAfter(".cancel");
}
发布于 2018-08-02 05:02:17
试试看,如果有帮助,请告诉我。
$(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>
发布于 2018-08-02 05:09:50
只要切换选择器的位置即可。$(".view").insertAfter(".cancel")
将在cancel
链接之后插入view
链接,但$(".cancel").insertAfter(".view")
将在view
链接之后插入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>
https://stackoverflow.com/questions/51642089
复制相似问题