javascript - 如何将一组div包裹在一个div中

Question

我有这个 html 代码:

<div id="elem">
    <div data-foo="aaa">a</div>
    <div data-foo="aaa">a</div>
    <div data-foo="aaa">a</div>
    <div data-foo="bbb">b</div>
    <div data-foo="bbb">b</div>
    <div data-foo="ccc">c</div>
    <div data-foo="ccc">c</div>
    <div data-foo="ccc">c</div>
    <div data-foo="ccc">c</div>
    <div data-foo="ccc">c</div>
</div>

我需要将所有这些不同的 div[data-foo] 分组到一个 div 中，如下所示:

    <div id="elem">
        <div class="wrap">
            <div data-foo="aaa">a</div>
            <div data-foo="aaa">a</div>
            <div data-foo="aaa">a</div>
        </div>
        <div class="wrap">
            <div data-foo="bbb">b</div>
            <div data-foo="bbb">b</div>
        </div>
        <div class="wrap">
            <div data-foo="ccc">c</div>
            <div data-foo="ccc">c</div>
            <div data-foo="ccc">c</div>
            <div data-foo="ccc">c</div>
            <div data-foo="ccc">c</div>
        </div>
    </div>

那些 div[data-foo] 内容是动态生成的。我不知道如何解决这个问题。有人可以帮帮我吗？

Answer 1

如果您不知道可能的值，您可以这样做:

$('#elem [data-foo]').each(function(){
  var $this = $(this),
      $w = $(this).parent().find('.wrap:has([data-foo="'+$this.data('foo')+'"])');
  if (!$w.length) $w = $('<div>').addClass('wrap').appendTo($this.parent());
  $w.append(this);
});