Переместите элемент в конец arry и вставьте новый элемент в свободное положение с jquery

Question

У меня есть html ниже. Я хочу захватить div2 переместить его после div4 (конец массива) и вставить новый div1.5 в новую свободную позицию.

<div id="data"> 
     <div>1</div> 
     <div>2</div>  
     <div>3</div> 
     <div>4</div> 
    </div> 

Уверен, что это можно сделать с помощью одного или двухстороннего устройства. Но как?

Answer 1

Вы можете использовать комбинацию eq() для выбора второго DIV, replaceWith изменить его содержание, и appendTo(), чтобы добавить его к концу родителя div. Попробуйте это:

var $div2 = $('#data div').eq(1); 
var $newDiv = $('<div />', { text: '1.5' }); 
$div2.replaceWith($newDiv).appendTo('#data'); 

Example fiddle

В качестве альтернативы, вы можете просто изменить текст второго div, и добавить 'новый' Div 2 до конца:

$('#data div').eq(1).text('1.5'); 
$('<div />', { text: '2' }).appendTo('#data'); 

Example fiddle

Answer 2

Я не уверен, каков фон вашего вопроса, но одно решение может быть следующим примером:

$('#data div:eq(1)').insertAfter('#data div:eq(3)'); 
 
$('<div>1.5</div>').insertAfter('#data div:eq(0)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="data"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>