jQuery 从一个元素换行到另一个元素

jQuery wrap from one element to another

本文关键字：元素 换行 另一个 一个 jQuery      更新时间：2023-09-26

我在尝试将一些未包装的内容包装在div中时遇到了一些困难。代码如下所示：

<div class="wrap">
 <div class="A1">some content</div>
 <div class="A2">some content</div>
 Unwrapped text
 <div class="A3">some content</div>
 <div class="B1">some content</div>
 <div class="B2">some content</div>
 Unwrapped text
 <div class="B3">some content</div>
</div>

如您所见，我想做的是将所有 A 元素包装到一个div 中，并在两者之间包含解开的文本。然后，对 B 元素执行相同的操作。有什么想法吗？

将

文本节点包装在元素之间有点复杂，所以首先要做的是用跨度包装这些文本节点

var wrap = $('.wrap'),
    html = wrap.contents();
html.filter(function(i, el) {
    if (el.nodeType === 3 && el.nodeValue && el.nodeValue.trim().length) 
       $(el).wrap('<span class="wrapped_in" />');
});
然后

就是反过来迭代孩子，然后把他们包起来

wrap.children().toArray().reverse().forEach(function(elem) {
    if ( $(elem).closest('.wrapped').length > 0 || $(elem).hasClass('wrapped_in') ) 
        return false;
    var char = (elem.className || "_").charAt(0);
    var elem = $('[class^="'+char+'"]');
    $(elem.add(elem.prev('.wrapped_in'))).wrapAll('<div class="wrapped wrap_'+(++i)+'" />')
});

小提琴

如果出于某种原因您不希望文本节点包装在跨度中，只需在所有其他包装完成后解开它们

$('.wrapped_in').contents().unwrap()

这将起作用：

var split = function() {
  var arr = ['A', 'B'];
  for (var i in arr) {
    var ch = arr[i];
    $("<div class='" + ch + "'>").insertBefore("div[class*='" + ch + "']:first");
    $("<div class='" + ch + "'>").insertAfter("div[class*='" + ch + "']:last");
  }
}
.A,
.B {
  border: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="A1">some content</div>
  <div class="A2">some content</div>
  Unwrapped text
  <div class="A3">some content</div>
  <div class="B1">some content</div>
  <div class="B2">some content</div>
  Unwrapped text
  <div class="B3">some content</div>
</div>
<button onclick="split()">Split Divs</button>

相关文章：