使用javascript創建從子元素的父親

Question

假設我有一個ids列表[[1,2]，[4,5,6]]

我試圖爲每組ids創建一個父元素，說一個div

目前其：

<span id="data-inject"> 
    <br> <br> 
    <span id=1>Barack</span> 
    <br> <br> 
    <span id=2>Obama</span> 
    <span id=3>xx</span> 
<span> 

我想它是：

<span id="data-inject"> 
    <br> <br> 
    <div id=test> 
     <span id=1>Barack</span> 
     <br> <br> 
     <span id=2>Obama</span> 
    </div> 
    <span id=3>xx</span> 
    </span> 

有沒有什麼辦法來實現SAM使用Java腳本？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span id="data-inject"><br> <br> <span id="0">xx</span>&nbsp;<span id="1">Barack</span>&nbsp;<span id="2">Obama</span>&nbsp;<span id="3">xx</span>&nbsp;<span id="4">Barack</span>&nbsp;<span id="5">Obama</span>&nbsp;<span id="6">Barack</span>&nbsp;<span id="7">Obama</span><br> <br> <span id="8">sdsds</span>&nbsp;<span id="9">Barack</span>&nbsp;<span id="10">Obama</span></span>

Answer 1

嘗試這種情況：

$('#data-inject').find('span').slice(0,2).wrapAll('<div id="test"></div>').after(' '); 

這裏是一個的jsfiddle：https://jsfiddle.net/8L1mutxr/

。經過（」「）

在元素之後添加空格。但順便說一句，你的HTML很髒。

Answer 2

使用jQuery可以輕鬆地創建爲每個陣列項和一個新的元件，然後通過內陣列環路搜索和附加到新創建的項，

的例子應該是自動的說明：

var arr = [[1,2],[4,5,6], [7,8,9,10]] 
 

 
arr.forEach((x, i) => { 
 
    // we create a parent div for each item 
 
    var parent = $('<div class="parent'+ i + '"></div>') 
 
    // we append it 
 
    $('#data-inject').append(parent) 
 
    
 
    // we loop through inner arrays and append them to newly created 'parent' 
 
    x.forEach(z => { 
 
    parent.append($('#' + z)) 
 
    }) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span id="data-inject"> 
 
    <span id="0">xx</span>&nbsp; 
 
    <span id="1">Barack</span>&nbsp; 
 
    <span id="2">Obama</span>&nbsp; 
 
    <span id="3">xx</span>&nbsp; 
 
    <span id="4">Barack</span>&nbsp; 
 
    <span id="5">Obama</span>&nbsp; 
 
    <span id="6">Barack</span>&nbsp; 
 
    <span id="7">Obama</span> 
 
    <span id="8">sdsds</span>&nbsp; 
 
    <span id="9">Barack</span>&nbsp; 
 
    <span id="10">Obama</span> 
 
</span>