Question

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

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

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

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

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

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

请帮忙。谢谢！

Answer 1

关于第一部分：

单击该按钮，将其附加到按钮容器中。

<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

Answer 2

您是否看过prepend() / prependTo()？您只需要保留对按钮列的容器的引用，然后在其前面添加。

Link to Fiddle

Answer 3

是否可以使用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());

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

3 个答案: