jQuery 包装每个类 + 类元素(不同类)

Question

我试图将包含类 black 的每两个元素彼此靠近地包装起来和blue在 <div class="wrap">在我的页面上。

我尝试了这个，但它不能按我的需要工作:

$(".black, .blue").each(function() {
  $(this).next().hasClass('black').wrapAll('<div class="wrap"></div>')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col red"></div>
<div class="col black"></div>
<div class="col blue"></div>
<div class="col red"></div>
<div class="col white"></div>
<div class="col yellow"></div>
<div class="col red"></div>
<div class="col black"></div>
<div class="col bllue"></div>

这是我想要的输出:

<div class="col red"></div>

<div class="wrap">
    <div class="col black"></div>
    <div class="col blue"></div>
</div>

<div class="col red"></div>
<div class="col white"></div>
<div class="col yellow"></div>
<div class="col red"></div>

<div class="wrap">
    <div class="col black"></div>
    <div class="col blue"></div>
</div>

Answer 1

当您循环遍历 .black 和 .blue 元素时，您当前的方法是有缺陷的，仅尝试检测以下 .black 元素，而且还因为您使用了 hasClass()，它返回一个 bool 值，但尝试调用它的方法。

要实现此目的，您可以循环遍历每个 .black 并确定 next() 元素是否为 .blue。如果是，您可以将它们都包装在 div 中，如下所示:

$('.black').each(function() {
  var $this = $(this);
  var $next = $this.next();
  if ($next.is('.blue'))
    $this.add($next).wrapAll('<div class="wrap"></div>');
});

.red { color: red; }
.black { color: black; }
.blue { color: blue; }
.white { color: white; }
.yellow { color: yellow; }

.wrap { 
  border: 1px dotted #CCC;
  background-color: #EEE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
<div class="col red">Foo</div>
<div class="col white">Foo</div>
<div class="col yellow">Foo</div>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>

Using your example I would like to add a third element having the same class blue.

我假设在这种情况下，.black 之后可能有无限数量的 .blue 元素，并且它们都应该被包装。在这种情况下，请使用 nextUntil() 和 :not(.blue)，如下所示:

$('.black').each(function() {
  var $this = $(this);
  if ($this.next().is('.blue')) {
    $this.add($this.nextUntil(':not(.blue)')).wrapAll('<div class="wrap"></div>');
  }
});

.red { color: red; }
.black { color: black; }
.blue { color: blue; }
.white { color: white; }
.yellow { color: yellow; }

.wrap { 
  border: 1px dotted #CCC;
  background-color: #EEE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
<div class="col red">Foo</div>
<div class="col white">Foo</div>
<div class="col yellow">Foo</div>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
<div class="col blue">Foo</div>
<div class="col blue">Foo</div>
<div class="col red">Foo</div>