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>

将元素移动到数组的末尾，并使用jquery在自由位置插入一个新元素

2 个答案: