如何将容器内的每 2 个元素包装在 div 中，除了带有特定 class 的元素？

Question

我想将每 2 张图像分组到不同的 div 中，但将较宽的图像只保留一张图像。那就是 HTML:

<figure id="container">
    <img src="001.jpg" class="single" />
    <img src="002.jpg" class="single" />
    <img src="003.jpg" />
    <img src="004.jpg" />
    <img src="005.jpg" />
    <img src="006.jpg" />
    <img src="007.jpg" />
    <img src="008.jpg" class="single" />
    <img src="009.jpg" />
    <img src="010.jpg" class="single" />
</figure>

所以，我不知道使用什么 jQuery 脚本来对 class "single" 更广泛的这些进行分组。我要：

<figure id="container">
  <div><img src="001.jpg" class="single" /></div>
  <div><img src="002.jpg" class="single" /></div>
  <div><img src="003.jpg" />
    <img src="004.jpg" /></div>
  <div><img src="005.jpg" />
    <img src="006.jpg" /></div>
  <div><img src="007.jpg" /></div>
  <div><img src="008.jpg" class="single" /></div>
  <div><img src="009.jpg" /></div>
  <div><img src="010.jpg" class="single" /></div>
</figure>

Answer 1

现在我已经完全理解你的问题了，下面有一个函数应该可以满足你的需要。

这是函数的作用：

遍历 container 中的所有图像并检查每个图像是否有 class single。
如果不是 single 则也检查下一个元素。只包裹第一个，或者如果第二个也不是 single.
继续循环，但如果上面的第二个元素也是 single，则跳过下一次迭代。

这是带有可运行片段的代码：

$(function() {

  var skip = false;
  $('#container img').each(function() {
    var $this = $(this);
    if (!skip && $this.is(":not(.single)")) {
      var $next = $this.next('img');
      if ($next.is(".single")) {
        skip = false;
        $this.wrapAll("<div/>");
      } else {
        skip = true;
        $this.add($next).wrapAll("<div/>");
      }
    } else {
      skip = false
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure id="container">
    <img src="001.jpg" class="single" />
    <img src="002.jpg" class="single" />
    <img src="003.jpg" />
    <img src="004.jpg" />
    <img src="005.jpg" />
    <img src="006.jpg" />
    <img src="007.jpg" />
    <img src="008.jpg" class="single" />
    <img src="009.jpg" />
    <img src="010.jpg" class="single" />
</figure>

Answer 2

var divopen = false;
var string = "";
$("#container").children().each(function(index){
   if($(this).hasClass("single")){
      if(divopen) string += '</div>';
   string += '<div><img src="'+$(this).attr("src")+'" class="single" /></div>';
   divopen = false;
   }
   else{
      if(divopen){
         string += '<img src="'+$(this).attr("src")+'" /></div>';
         divopen = false;
      }
      else{
         string += '<div><img src="'+$(this).attr("src")+'" />';
         divopen = true;
      }
   }
});
$("#container").html(string);

如果这适合您的应用，请参阅 JFiddle。

如何将容器内的每 2 个元素包装在 div 中，除了带有特定 class 的元素？

How to wrap every 2 elements inside a container in a div, except the ones with a certain class out?

html

javascript

jquery

grouping