如何动态排列html元素,如按钮表单输入

时间:2013-09-13 20:00:06

标签: javascript jquery html arrays button

关于如何动态排列html按钮,我有两个问题。我想安排按钮而不重新加载页面,所以我一直在尝试使用jquery。

首先,我有一列html按钮,我希望能够点击一个并让它转到列中的特定位置。例如,如果我点击一个并且我希望它转到列的最顶部,那么我点击另一个按钮,最近点击的按钮会转到列的最顶部。

我想我可以使用一系列html按钮完成此操作,但我是javascript的新手,我不知道是否可以以这种方式动态排列html按钮。是否可以使用javascript数组动态排列html按钮?有没有更好的方法来安排html元素?

其次,我想动态地在列的顶部插入新按钮。我在使用jquery之前的方法添加新按钮方面取得了一些成功。但是before方法要求我提供列顶部的当前按钮,如果我动态排列和重新排列按钮,这将不起作用。

我已经在jquery的API文档中查看了其他“DOM Insertion”方法,但我还没有找到一种方法来动态插入列顶部的按钮,而没有专门提供最顶层按钮的id。

我的数组概念再次派上用场了。我可以在数组的零索引中插入一个新按钮,但是我没有看到通过我查看过的代码中的javascript数组显示的html元素。

请帮忙。谢谢!

3 个答案:

答案 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()?您只需要保留对按钮列的容器的引用,然后在其前面添加。

Link to Fiddle

答案 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());