使用javascript从子元素创建父元素

时间:2017-11-18 09:33:54

标签: javascript jquery

说我有一份ids [[1,2],[4,5,6]]

列表

我正在尝试为每组id创建一个父元素,比如说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>

有没有办法用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>

2 个答案:

答案 0 :(得分:0)

试试这个:

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

这是一个Jsfiddle:https://jsfiddle.net/8L1mutxr/

  

.after('')

在元素后面添加空格。但是你的HTML非常脏。

答案 1 :(得分:0)

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

相关问题