javascript - 如何像按钮表单输入一样动态排列 html 元素

标签 javascript jquery html arrays button

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

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

我想我可以用一组 html 按钮来完成这个任务,但我对 javascript 很陌生,我不知道是否可以以这种方式动态排列 html 按钮。是否可以使用 javascript 数组动态排列 html 按钮?有没有更好的方法来排列 html 元素?

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

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

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

请帮忙。谢谢!

最佳答案

你看过prepend()/prependTo()吗?您只需要保存对按钮列的容器的引用,然后将其添加到其前面。

Link to Fiddle

关于javascript - 如何像按钮表单输入一样动态排列 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18794301/

相关文章:

javascript - 无法在循环外的控制台日志中显示数组值?

html - 如何缩小 <p> 标签之间的垂直空间?

javascript - 确定 DOM 元素可能增长到的最大宽度?

javascript - 如何禁用 jsPDF 嵌入默认字体列表?

jquery - 处理多个 AJAX 调用

javascript - 使用 JQuery .val() 提取 HTML 值

html - 我将如何解决 iOS 设备上网页的这个奇怪的高度错误? + 视频不播放

javascript - 如何在浏览器中以全屏模式播放图片或视频文件?

javascript - 在窗口不移动的情况下,如何使用 JavaScript 检测 div 滚动了多远?

javascript - CSS/JS/Jquery 中的 SVG 发光效果