关于如何动态排列html按钮,我有两个问题。我想安排按钮而不重新加载页面,所以我一直在尝试使用jquery。
首先,我有一列html按钮,我希望能够点击一个并让它转到列中的特定位置。例如,如果我点击一个并且我希望它转到列的最顶部,那么我点击另一个按钮,最近点击的按钮会转到列的最顶部。
我想我可以使用一系列html按钮完成此操作,但我是javascript的新手,我不知道是否可以以这种方式动态排列html按钮。是否可以使用javascript数组动态排列html按钮?有没有更好的方法来安排html元素?
其次,我想动态地在列的顶部插入新按钮。我在使用jquery之前的方法添加新按钮方面取得了一些成功。但是before方法要求我提供列顶部的当前按钮,如果我动态排列和重新排列按钮,这将不起作用。
我已经在jquery的API文档中查看了其他“DOM Insertion”方法,但我还没有找到一种方法来动态插入列顶部的按钮,而没有专门提供最顶层按钮的id。
我的数组概念再次派上用场了。我可以在数组的零索引中插入一个新按钮,但是我没有看到通过我查看过的代码中的javascript数组显示的html元素。
请帮忙。谢谢!
答案 0 :(得分:0)
关于第一部分:
单击该按钮,将其附加到按钮容器中。
<div>
<button>1</button>
<button>2</button>
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
$(this).appendTo('div');
});
});
</script>
关于第2部分:
当您添加按钮时,可以使用prepend
。
$('button').click(function(){ $('div').prepend('<button>button</button>'); });
这是两个部分的小提琴
这是一个jsbin:http://jsbin.com/ORoXIHo/1/edit
答案 1 :(得分:0)
您是否看过prepend()
/ prependTo()
?您只需要保留对按钮列的容器的引用,然后在其前面添加。
答案 2 :(得分:0)
是否可以使用javascript数组动态排列html按钮?有没有更好的方法来安排html元素?
javascript中的元素列表被键入为NodeLists。 DOM包含所有节点和NodeLists。因此,可以通过document
访问它们。在jQuery中,您可以定位这些节点。 jQuery将每个Node包装在一个对象中,如果存在多个Node,它将创建这些jQuery对象的数组。
我可以在数组的零索引中插入一个新按钮,但我还没有看到通过我查看的代码中的javascript数组显示的html元素。
var newButton = $("<input type='button' class='btn' />");
var htmlElements = $(".btn");
newButton.insertBefore(htmlElements.first());