Zastanawiałem się, czy istnieje funkcja jQuery (lub inna biblioteka), która pozwala mi wstawić węzeł (div) między dwoma innymi węzłami (divs) na podstawie jego atrybutu.

Na przykład:

Powiedzmy, że mam ten kod HTML:

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

Chcę wstawić <div value=333/> odpowiednio między 222 a 444.

Dzięki wszystkim pomocnikom.

-3
user9852405 4 czerwiec 2018, 17:01

3 odpowiedzi

Najlepsza odpowiedź

Tak, możesz to zrobić.

  • Uzyskaj pożądane div przy użyciu querySelector
  • Użyj metody after, aby dodać nowy element po uzyskanym w poprzednim etapie
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>

Aby dynamicznie znaleźć poprawny punkt, możesz użyć metody find w ten sposób.

  • Znajdź pierwszy element o wartości większej niż ten, który zapewnisz
  • Użyj metody before, aby umieścić nowy element przed jednym z poprzedniego kroku
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>
0
Matus Dubrava 4 czerwiec 2018, 14:54

Oba jQuery oferuje szereg metod: insertBefore, {X1}}, before i after.

Dom zapewnia insertBefore i < href = "https://developer.mozilla.org/en-us/docs/web/api/Element/insertadjacthtml" rel = "NOFollow NefErr"> insertAdjacentHTML .

Na przykład przy użyciu jQuery's {x0}}:

$("div[value=444]").before("<div value=333></div>");

Lub za pomocą domu's insertBefore:

var div = document.createElement("div");
div.setAttribute("value", "333");
var target = document.querySelector("div[value=444]");
target.parentNode.insertBefore(div, target);

Lub za pomocą domu's insertAdjacentHTML:

document.querySelector("div[value=444]").insertAdjacentHTML(
    "beforebegin",
    "<div value=333></div>"
);

SIDE UWAGA: div nie jest a Element void, <div /> nie jest tagiem samozamykającym, to Start Tag z /, który jest ignorowany.

Uwaga boczna 2: value nie jest prawidłowym atrybutem dla {{X1} } elementy.

0
T.J. Crowder 4 czerwiec 2018, 14:09

Użyj after(); Oto przykład pracujący w Codepen https://codepen.io/anon/pen/bvjbqz

0
harry 4 czerwiec 2018, 14:09