2

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

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

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

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

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

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

请帮忙。谢谢！

4

3 回答 3

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

于 2013-09-13T20:02:58.720 回答
0

你看过prepend()/prependTo()吗？您只需要保留对按钮列容器的引用，然后添加到该容器之前。

链接到小提琴

于 2013-09-13T20:05:58.747 回答
0

是否可以使用 javascript 数组动态排列 html 按钮？有没有更好的方法来排列 html 元素？

javascript 中的元素列表被键入为 NodeLists。DOM 包含所有节点和节点列表。因此，它们可以通过document. 在 jQuery 中，您可以定位这些节点。jQuery 会将每个 Node 包装在一个对象中，如果存在多个 Node，它将创建这些 jQuery 对象的数组。

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

var newButton = $("<input type='button' class='btn' />");
var htmlElements = $(".btn");
newButton.insertBefore(htmlElements.first());
于 2013-09-13T20:07:20.497 回答