Если элемент присутствует с указанным классом c и атрибутом данных «position x», добавьте этот элемент в список элементов после «position x»

Question

Если элемент с классом itemToAppend присутствует и имеет указанный c атрибут данных «position», data-position="2", добавьте этот элемент в список элементов после позиции 2.

Вот что я хотел бы достичь, скажем, у нас есть:

<div class="itemToAppend" data-position="2">My Item</div>

Мой itemToAppend присутствует, поэтому добавьте этот элемент после моего второго <li>

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>
    <div class="itemToAppend" data-position="2">My Item</div>
  </li>
  <li>List 3</li>
  <li>List 4</li>
</ul>

Есть ли простой способ сделать это с jquery? Спасибо за вашу помощь!

Answer 1

Использование jquery insertAfter

$(document).ready(function() { 
  $("button").click(function() { 
    $("li").has(".itemToAppend").remove();
    $(`<li><div class="itemToAppend" data-position="2">My Item</div>
  </li>`).insertAfter(`ul li:nth-child(${$('#test').val()})`); 
  }); 
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>  
  <li>List 5</li>
  <li>List 6</li>
</ul>

<input id="test" type="number" value="1"/>
<button>Click</button>

Answer 2

Вы можете использовать insertAfter, чтобы вставить нужный элемент после элемента с индексом n. Вы проверяете данные позиции, чтобы получить желаемое местоположение. Вы используете: eq selector для вставки элемента после элемента с этой позицией.

https://api.jquery.com/insertAfter/

https://api.jquery.com/eq-selector/

let itemPosition = parseInt($(".itemToAppend").attr("data-position"));
$(".itemToAppend").insertAfter("ul li:eq("+itemPosition+")");