Question

HTML：

<div class="row">
   <div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="D"></div>
</div>
<div class="row">
   <div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="D"></div>
</div>

我想要实现的目标：

<div class="row">
   <div class="newDiv">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
   </div>
   <div class="D"></div>
</div>
<div class="row">
   <div class="newDiv">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
   </div>
   <div class="D"></div>
</div>

我尝试了下一个代码，包括all in one，好的，但我不能在没有重复内容的情况下将D取出来。

jQuery('.row').wrapInner('<div class="newDiv"></div>');

如果单独关闭标签，则无法添加HTML。

jQuery('.A').before('<div class="newDiv">')
jQuery('.D').before('</div>')

Answer 1

你可以

1）遍历每一行

2）获取所有div元素

3）使用.slice(0,3)

选择前三个

4）使用.wrapAll()包裹：

$('.row').each(function(){
   $(this).find("div").slice(0,3).wrapAll("<div class='newDiv'></div>");
});

<强> Working Demo

Answer 2

使用.each()在每个div上使用您的代码，例如：

$(document).ready(function(){

  $("div[class^=row]").each(function(){
    $(this).wrapInner('<div class="newDiv"></div>');
    $(this).find(".A").before('<div class="conteneur-produit">')
    $(jQuery(this).find(".D")).insertAfter($(this).find('.newDiv'))
  });
});

SEE DEMO

Answer 3

以下是演示：https://jsfiddle.net/7a60jz07/

$('.row').each(function(){
    var newdiv = $('<div class="newDiv">');   

    var lastdiv = $(this).children().last();

    $(this).append(newdiv);
    newdiv.append($(this).children());
    newdiv.after(lastdiv);
})

Answer 4

我能想到的最简单的方法就是

$('[class^="row"]').prepend('<div class="newDiv">');
$('[class^="row"]').children().last().before('</div>');

jQuery - 在特定元素之间插入div

4 个答案: