时间戳

首页 > 解决方案 > 根据属性条件在两个节点之间插入节点？

javascript - 根据属性条件在两个节点之间插入节点？

问题描述

我想知道是否有一个 jquery（或其他库）函数允许我根据其属性在其他两个节点（div）之间插入一个节点（div）。

例如：

假设我有这个 html 代码：

<div value=111/>
<div value=222/>
<div value=444/>

我想<div value=333/>相应地插入 222 和 444 之间。

感谢所有的帮助者。

标签： javascriptjqueryhtml

解决方案

是的，你可以这样做。

  • 获得所需div的使用querySelector
  • 使用after方法在上一步获得的元素之后添加新元素

const div = document.createElement('div');
div.textContent = 'three';

const target = document.querySelector('div[value=two]');

target.after(div);
<div value="one">one</div>
<div value="two">two</div>
<div value="three">four</div>

要动态找到正确的位置，您可以使用find这样的方法。

  • 找到值大于您提供的值的第一个元素
  • 使用before方法将新元素放在上一步中的元素之前

const myValue = 333;

const div = document.createElement('div');
div.textContent = myValue;

const target = [...document.querySelectorAll('div')]
  .find(v => Number(v.getAttribute('value')) > myValue );

target.before(div);
<div value="111">111</div>
<div value="222">222</div>
<div value="444">444</div>

推荐阅读