javascript - JQuery - 只展开一个元素

Question

我有这样的情况:

<div>
    <span id="x1"></span>
    <span id="x2"></span>
    <span id="x3"></span>
</div>

我想得到这样的东西:

<div>
    <span id="x1"></span>
</div>
<span id="x2"></span>
<div>
    <span id="x3"></span>
</div>

我尝试使用 unwrap() 来做到这一点像这样的功能:

$('#x2').unwrap();  

但是这个函数删除了整个<div> .那么我如何使用 jQuery/JavaScript 来做到这一点呢？感谢您的帮助。

Answer 1

您可以从通用的 div 包装器中解开 span，然后将 x1 和 x3 包装在它们自己的新 div 中。

$('span').unwrap();
$('#x1,#x3').wrap('<div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span id="x1">x1</span>
    <span id="x2">x2</span>
    <span id="x3">x3</span>
</div>

如果你的跨度没有 ID，你可以做类似的事情

$('div > span:even').wrap('<div>').parent().unwrap()