Question

我正在尝试使用jquery方法wrapAll在窗口大小小于706的情况下，在具有相同类名的多个父级中包含具有相同类名的多个子级。

我想离开这里。

<div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

<div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

<div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

对此。

<div>
  <div>
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
</div>

<div>
  <div>
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
</div>

<div>
  <div>
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
</div>

继承我的jQuery

  if ($(window).width() < 705) {
   $( ".a,.b" ).wrapAll( "<div class='a-b'></div>" );
  }
  else {

  }

我是否需要为它们提供所有单独的类名并创建3种不同的wrapAll方法？或者有一种方法可以用一种方法/功能来完成所有这些工作吗？

Answer 1

要实现这一点，您可以循环遍历所有.a元素，获取其兄弟.b，然后使用wrapAll()将其包含在另一个div中，如下所示：< / p>

＆＃13;

$('.a').each(function() {
  var $b = $(this).next('.b');
  $(this).add($b).wrapAll('<div />');
});

＆＃13;

/* this is just to make the div structure more obvious in the output */
div { 
  border: 1px solid #CCC; 
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

<div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

<div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

＆＃13;

Answer 2

隔离父实例并在每个实例中查找要包装的组

$('.list').each(function(){
 $(this).find( ".a,.b" ).wrapAll( "<div class='a-b'></div>" );
})

.a-b{border:1px solid green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="a">A item</div>
  <div class="b">B item</div>
  <div class="c">C Item</div>
</div>
<div class="list">
  <div class="a">A item</div>
  <div class="b">B item</div>
  <div class="c">C Item</div>
</div>
<div class="list">
  <div class="a">A item</div>
  <div class="b">B item</div>
  <div class="c">C Item</div>
</div>

在多个div jQuery中包装具有相同类名的多个子节点

2 个答案: