说我有一份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> <span id="1">Barack</span> <span id="2">Obama</span> <span id="3">xx</span> <span id="4">Barack</span> <span id="5">Obama</span> <span id="6">Barack</span> <span id="7">Obama</span><br> <br> <span id="8">sdsds</span> <span id="9">Barack</span> <span id="10">Obama</span></span>
答案 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>
<span id="1">Barack</span>
<span id="2">Obama</span>
<span id="3">xx</span>
<span id="4">Barack</span>
<span id="5">Obama</span>
<span id="6">Barack</span>
<span id="7">Obama</span>
<span id="8">sdsds</span>
<span id="9">Barack</span>
<span id="10">Obama</span>
</span>