使用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>