如何更改 JS 中子元素的顺序?

2023-11-26

我有这个html:

<table>
    <tr>
        <td>
            Set right order
        </td>
        <td>
            <span style = "display: block;">asd | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
            <span style = "display: block;">dsa | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
            <span style = "display: block;">qwe | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
            <span style = "display: block;">ewq | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
        </td>
    </tr>
</table>

还有这个JS:

function moveChoiceTo(elem_choice, direction)
{
    var curr_index = -1; //index of elem that we should move
    var td = elem_choice.parentElement.parentElement; //link to TD

    for (var i = 0; i < td.children.length; i++) //determine index of elem that called this function
        if (td.children[i].children[0] == elem_choice)
        {
            curr_index = i;
            break;
        }

    if (curr_index == -1)
        return;

    if (curr_index == 0 && direction < 0) //if nowhere to move
        return;

    if (curr_index == td.children.length - 1 && direction > 0) //if nowhere to move
        return;

    var curr_child = td.children[curr_index]; //save current elem into temp var
    td.children.splice(curr_index, 1); //here I getting exception that splice isn't supported by object, but arent this is array?
    td.children.splice(curr_index + direction, 0, curr_child); //attempt to insert it
}

我得到例外splice不支持,但这应该是一个数组并支持此方法? 我还有哪些其他方法可以更改儿童顺序?


我将用更简单(更好)的方法添加答案:

function moveChoiceTo(elem_choice, direction) {

    var span = elem_choice.parentNode,
        td = span.parentNode;

    if (direction === -1 && span.previousElementSibling) {
        td.insertBefore(span, span.previousElementSibling);
    } else if (direction === 1 && span.nextElementSibling) {
        td.insertBefore(span, span.nextElementSibling.nextElementSibling)
    }
}

关键思想是使用插入之前方法得当。您也不需要从 DOM 中删除任何内容。

Demo: http://jsfiddle.net/dq8a0ttt/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改 JS 中子元素的顺序? 的相关文章

  • 如何使用javascript将大图像转换为十六进制?

    如果我尝试将图像转换为十六进制 无论我使用哪个函数 我都会收到此错误消息 该图像的大小为 7 MB 19812 毫秒 清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 别名资源 (WPF)

    我试图在 XAML 中为资源添加别名 如下所示
  • 从电话号码中提取代码国家/地区 [libphonenumber]

    我有一个这样的字符串 33123456789 法国电话号码 我想在不知道国家 地区的情况下提取国家 地区代码 33 例如 如果我有另一部来自其他国家 地区的手机 它应该可以工作 我使用谷歌图书馆https code google com p
  • matlab中如何判断一个矩阵是否为空?

    在我的 matlab 程序中 我想在进一步操作之前确定变量或函数的输出是否为空 实际上 我已经编写了一个计算两条线段之间的交点的函数 如果没有交集 则函数不返回任何内容 因此函数分配的变量将为空矩阵 我知道我可以使用size功能 但有没有更
  • 有没有办法使用 javascript 检测元素所在的 CSS 网格列和行?

    有没有一种方法可以在 JavaScript 中动态检测 CSS 网格中元素所在的网格列和行 我有一个网格 我设置了三个断点 使其具有 4 3 或 2 列 我想要做的是 如果用户单击某个单元格 则将单元格中的新元素立即动态覆盖到被单击的单元格
  • 如何检测 jQuery 中新元素的创建?

    假设我有以下代码 它返回页面上锚元素的数量 function getLinkCount alert Links a length 如果我在文档准备好后调用它 它将按预期工作 但是 如果现在通过 Javascript 动态地将新链接插入到页面
  • 在 Android Studio 1.3+ 自动完成中隐藏 android.R 资源

    是否可以将Android Studio配置为仅显示 drawable里面的资源project folder 我正在做的项目是一个行业项目 很少需要我使用R资源 我不认为你实际上可以做到这一点 只有库开发人员可以选择将资源隐藏在他们的aar分
  • 函数不改变传递的指针 C++

    我有我的职责并且我正在充实targetBubble那里 但调用这个函数后它没有被填充 但我知道它被填充在这个函数中 因为我有输出代码 bool clickOnBubble sf Vector2i mousePos std vector
  • 对 PHP 的非阻塞 Ajax 请求

    我正在使用 PHP 从远程服务器下载一个 大 文件 并且通过单击网页上的下载按钮来触发此下载 所以当我点击download网页上的按钮 然后Ajax请求 有角度 http 被制作为 PHP 函数 该函数使用触发下载cURL 同时 我想使用
  • 如何在 PHP 中创建一个带有反斜杠的字符串? [关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我需要一个反斜杠作为字符串的一部分 我该怎么做 当反斜杠 不转义字符串的终止引号或以其他
  • 查找与给定条件匹配的元素的索引

    给定一个数组 如何找到与给定条件匹配的元素的所有索引 例如 如果我有 arr x o x o x 查找该项目所在的所有索引x 我可以做 arr each with index map a i a x i nil compact gt 0 2
  • 可以使用异常来检查数组边界吗?

    我想检查给定的坐标是否在数组内 public boolean checkBounds int x int y try Object val array x y return true catch ArrayIndexOutOfBoundsE
  • 将图像从 URL 加载到表视图单元格中的图像视图的更快方法

    我用它来加载 URL 到图像视图 let url NSURL string URL let data NSData contentsOfURL url self releasephoto image UIImage data data 但是
  • 检测当前 iPhone 输入语言

    有谁知道 我可以获得iPhone应用程序中当前的输入语言和 或键盘布局吗 输入语言更改时我还能收到通知吗 在 iOS 4 2 及更高版本中 您可以使用UITextInputMode类来确定当前用于文本输入的主要语 言 UITextInput
  • 使用 roxygen2 构建 R 包时出错

    我有 2 个文件 File R 和 Cpp File c Cpp File c 中的内容 include
  • 如何编写线程安全的自动化测试

    我有一个不是线程安全的类 class Foo Abstract base class code which is not thread safe 此外 如果您有 foo1 和 foo2 对象 则在 foo2 gt anotherFunc 返
  • 构建适用于 Android 的 OpenCV 并将其与 NDK 一起使用

    背景 我目前正在 Android Studio 上为 Moverio BT 200 增强现实眼镜开发一个应用程序 我正在使用 OpenCV 特别是该库的 arUco 模块 该模块必须与 NDK 一起使用 另外 它不在稳定版本中 所以我自己编
  • 使用 if/else 或字典更好的优化技术

    哪个优化更好 接收 字符串 的一系列 if else 语句会为其返回适当的函数 大约 40 50 个 if else 语句 维护键值对的字典 键作为字符串 值作为函数对象 以及一个用于搜索和返回函数对象的主函数 使用上述方法实际返回函数对象
  • 从 4 个角颜色插值的二维色带(256x256 矩阵)

    我想要实现的是以编程方式创建由 256x256 颜色值矩阵表示的二维色带 预期结果可以在附图中看到 我的起点是矩阵的 4 个角颜色 应从中插值中间剩余的 254 种颜色 虽然我在对一个轴的颜色进行插值方面取得了一些成功 但二维计算却给我带来
  • 使用 Azure Active Directory - 一个用于本地登录和发布时登录的应用程序

    我正在使用 Azure Active Directory 身份验证构建 MVC 应用程序 当我在本地开发时 我希望能够登录以进行测试 开发 应用程序网址就像http localhost 43400 这也被编码在 AD 应用程序中Sign O
  • 如何更改 JS 中子元素的顺序?

    我有这个html table tr td Set right order td td span style display block asd a href uarr a a href darr a span span style disp