javascript - 在有 span 的按钮组中添加父 div

Question

我在一个 div 中有一组按钮和跨度，我正在尝试向每组按钮添加一个父 div。

HTML :

<div class="btnWrapper">
<button type="button" class="fr-bttn" title="Bold">One</button>
<button type="button" class="fr-bttn" title="Italic">Two</button>
<button type="button" class="fr-bttn" title="Underline">three</button>
<button type="button" class="fr-bttn" title="Bold">Four</button>
<span class="sptr"><span>
<button type="button" class="fr-bttn" title="Strike">five</button>
<button type="button" class="fr-bttn" title="color">Six</button>
<span class="sptr"><span>
<button type="button" class="fr-bttn" title="Strike">Seven</button>
<button type="button" class="fr-bttn" title="color">Eight</button>
<button type="button" class="fr-bttn" title="color">Nine</button>
</div>

我想实现这样的目标

<div class="btnWrapper">
 <div class="parent_01">
    <button type="button" class="fr-bttn" title="Bold">One</button>
    <button type="button" class="fr-bttn" title="Italic">Two</button>
    <button type="button" class="fr-bttn" title="Underline">three</button>
    <button type="button" class="fr-bttn" title="Bold">Four</button>
  <div>   
 <span class="sptr"><span>
 <div class="parent_02">
    <button type="button" class="fr-bttn" title="Strike">five</button>
    <button type="button" class="fr-bttn" title="color">Six</button>
 </div>
<span class="sptr"><span>
<div class="parent_03">
    <button type="button" class="fr-bttn" title="Strike">Seven</button>
    <button type="button" class="fr-bttn" title="color">Eight</button>
    <button type="button" class="fr-bttn" title="color">Nine</button>
 </div>
</div>

编辑:我试过JavaScript

$(".fr-bttn").slice(0,3).wrapAll("<div class='parent1'></div>")

但面临的问题是 html 是动态生成的，我不能使用 slice() 设置每个，我需要用 <span></span> 做一些事情？

Answer 1

看看这个

FIDDLE

var $span = $('.btnWrapper').find("span");
$span.each(function(i) { // what is near the spans
    var $div = $('<div class="parent_0'+i+'">Hello '+i+'</div>');
    var $content =  Array.prototype.slice.call($(this).prevUntil("div,span")).reverse();
    $div.append($content);
    $('.btnWrapper').append($div).append($(this));
});
// handle the rest
var $div = $('<div class="parent_0'+$span.length+'">Hello'+$span.length+'</div>');
$('.btnWrapper > button').appendTo($div);
$('.btnWrapper').append($div);