Question

我想将不同div中的每2个图像分组，但只留下一个图像。那就是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脚本来分组这些尊重类“单一”，更广泛的类。我想要：

<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中的所有图片，并检查每个图片是否有single类。
如果不是single，那么也要检查下一个元素。如果第二个也不是single，则包裹第一个或两个。
继续循环，但如果上面的第二个元素也是single，则跳过下一次迭代。

以下是带有runnable片段的代码：

$(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。

如何将div中容器内的每2个元素包装起来，除了具有某个类的容器外？

2 个答案: