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包装器中解开跨距，然后将x1和x3包装在它们自己的新div中。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您的跨度没有ID，您可以执行类似

的操作

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

Answer 2

获取目标元素之后的所有兄弟，将它们包装在一个新的div中并将它们放在原始容器之后。

将目标元素放在两个div之间。

这适用于容器中的任意数量的项目，只会打开目标元素。

const el=$("#x2")
const parent =el.parent()
const nextSiblings=el.nextAll()
const newWrap=$("<div>").append(nextSiblings)
parent.after(newWrap)
parent.after(el)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div{border:solid 1px red;}
span{display:block}
</style>

<div>
    <span id="x1">1</span>
    <span id="x2">2</span>
    <span id="x3">3</span>
</div>

修改增加了解开多个元素的可能性，并处理从第一个或最后一个位置的移除。

const unWrapOne=el=>{ const parent =el.parent() const nextSiblings=el.last().nextAll() if(nextSiblings.length>0){ const newWrap=$("<div>").append(nextSiblings) parent.after(newWrap) } parent.after(el) if(parent.children().length===0) parent.remove() } const unwrapSome = elements => elements.each((index,el)=>unWrapOne($(el))) unwrapSome($("#x3,#x5")) //unwrap 2 non contiguous elements //unwrapSome($("#x2,#x3")) //unwrap 2 contiguous elements //unwrapSome($("#x2")) //unwrap 1 element from middle //unwrapSome($("#x1")) //unwrap 1 element from begining //unwrapSome($("#x6")) //unwrap 1 element from end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> div{border:solid 1px red;} span{display:block} </style> <div> <span id="x1">1</span> <span id="x2">2</span> <span id="x3">3</span> <span id="x4">4</span> <span id="x5">5</span> <span id="x6">6</span> </div>

Answer 3

以下是两种javascript方式：

第一个：

使用纯JavaScript将新元素元素中的给定元素包装：

	// element that will be wrapped
var el = document.querySelector('#x1');

// create wrapper container
var wrapper = document.createElement('div');

// insert wrapper before el in the DOM tree
el.parentNode.insertBefore(wrapper, el);

// move el into wrapper
wrapper.appendChild(el);


var el2 = document.querySelector('#x3');
var wrapper2 = document.createElement('div');
el2.parentNode.insertBefore(wrapper2, el2);
wrapper2.appendChild(el2);

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

第二个： 使用getElementById

HTMLElement.prototype.wrap = function(wrapper){
  this.parentNode.insertBefore(wrapper, this);
  wrapper.appendChild(this);
}

  
  var element = document.getElementById('x1'); 
  element.wrap(document.createElement('div'));
  
   var elementx3 = document.getElementById('x3');
      elementx3.wrap(document.createElement('div'));

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

Answer 4

＆＃13;

//some DOM1 vanilla... 
var parent = x1.parentElement;
//var cntnt =  parent.children;

//unwrapping the container div with ancient dhtml method
parent.outerHTML = parent.innerHTML;

// wrapping selected elements with jQuery
$("#x1,#x3").wrap('<div>');

// show the end-result HTML
console.log(document.body.innerHTML);

＆＃13;

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

＆＃13;

Answer 5

.wrap()和.unwrap()对我来说从未奏效过。相反，我通常只是将元素outerHTML包装起来并使用innerHTML来解包。你在评论中提到了一个列表，这就是我在这里选择的原因。无论你如何选择跨度，我认为我的按钮处理程序演示了你想要实现的目标。对于每个跨度，这也不需要唯一的ID，也不需要有多少。

PopulateSelect();

$('button').on('click', function() {
  $('select option:selected').each(function(offset, span) {
    let $span = $(`span.unwrapped:eq(${span.index - offset})`);
    $span.removeClass('unwrapped')[0].outerHTML = `<div>${$span.html()}</div>`;
  });
  PopulateSelect();
});

function PopulateSelect() {
  let options = '';
  $('span.unwrapped').each(function() {
    options += `<option>${this.textContent}</option>`;
  });
  $('select').html(options);
}

https://jsfiddle.net/8429pcpu/2/

这有点牵扯，所以不要向一堆链接发送垃圾邮件，请随时询问您不理解的任何内容。

JQuery - 只打开一个元素

5 个答案: