Question

我试图在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元素做同样的事情。有什么想法吗？

Answer 1

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

var count = 0;
function animateNextOption() {
  $("." + selectedOption + ":eq(" + count++ + ")").show().animate({
    left: 0 + $(".option1:visible").outerWidth(),
    opacity: 1
  }, 700, animateNextOption);
}
animateNextOption();

然后，这只是反过来迭代孩子并将其包起来的问题

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" />');
});

FIDDLE

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

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)+'" />')
});

Answer 2

这将有效：

＆＃13;

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");
  }
}

＆＃13;

.A,
.B {
  border: 1px black solid;
}

＆＃13;

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

＆＃13;

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

2 个答案: