Question

我有一些看起来像这样的HTML：

ImmutableList<MyAstNode>

我希望得到以下输出：

<p>Some Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some More Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some Other Text</p>

我尝试了<p>Some Text</p> <div class="wrapperDiv"> <div class="listBullet">Item 1</div> <div class="listBullet">Item 2</div> <div class="listBullet">Item 3</div> </div> <p>Some More Text</p> <div class="wrapperDiv"> <div class="listBullet">Item 1</div> <div class="listBullet">Item 2</div> <div class="listBullet">Item 3</div> </div> <p>Some Other Text</p>，但最终将这两个块移动到彼此连续。看起来我需要的是一个选择器，它将连续的块分隔成单独的元素，然后我将单独调用wrapAll。

Answer 1

这就是工作：

$('p + .listBullet').each(function() {
  $(this).nextUntil('p')
         .addBack()
         .wrapAll("<div class='wrapperDiv' />");
});

Fiddle 1

<小时/> 如果你的XHTML有多种元素，你可以这样做（假设container是父div的类）：

$('.container > :not(.listBullet) + .listBullet').each(function() {
  $(this).nextUntil('.container > :not(.listBullet)')
         .addBack()
         .wrapAll("<div class='wrapperDiv' />");
});

Fiddle 2

<小时/> 这是一种更强力的方法：

var lb= [];
$('.container > *').each(function() {
  if($(this).hasClass('listBullet')) {
    lb.push(this);
  }
  else {
    $(lb).wrapAll("<div class='wrapperDiv'/>");
    lb= [];
  }
});
$(lb).wrapAll("<div class='wrapperDiv'/>");

Fiddle 3

Answer 2

作为一般方法，您可以：

使用.next()遍历页面上的所有元素，而您找到的下一个元素具有正确的类，（使用.attr("class")）添加额外的currentList类（或simular）class wrapAll on currentList然后用currentList类选择所有项并删除该类然后继续循环！

Answer 3

嗯，你也可以做这样的事情，虽然可能只是使用jQuery方法更直接（并且更灵活）：

http://jsfiddle.net/ewj44a2L/1/

var listBullets = $('.listBullet'),
    n = 3, // Number of bullets per group. All groups must be equal.
    len = listBullets.length / n; // Number of groups to be encapsulated
for(var i = 0; i < len; i++) {
    listBullets.slice( n * i, n * (i + 1) )
    .wrapAll('<div class="wrapperDiv"></div>');
}

.wrapperDiv {
    background: #000;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some More Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some Other Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>

Answer 4

尝试

＆＃13;

$("p").map(function(i, el) {
  var el = $(el), list = ".listBullet";
  if (el.next().is(list)) {
    var wrap = el.after("<div class=wrapperDiv />").next();
    do { wrap.next().appendTo(wrap); } 
    while (wrap.next().is(list));
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<p>Some Text</p>
   <div class="listBullet">Item 1</div>
   <div class="listBullet">Item 2</div>
   <div class="listBullet">Item 3</div>
<p>Some More Text</p>
   <div class="listBullet">Item 1</div>
   <div class="listBullet">Item 2</div>
   <div class="listBullet">Item 3</div>
<p>Some Other Text</p>

＆＃13;

如何在父div下包装连续的兄弟div？

4 个答案: