如何在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[data-foo]在一起，如下所示：

    <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);
});

Answer 2

試試這個...

PrevAttr= '';
        $('div#elem div').each(function(){

            attr = $(this).attr('data-foo');

            if(attr != PrevAttr)
            { PrevAttr = attr;
              $('div#elem div[data-foo='+attr+']').wrapAll('<div class="wrap"></div>')
            }
        })

Answer 3

試試這個 ：

$(document).ready(function(){
   var array = [];
    // get all unique data-foo
    $('#elem div').each(function(){
      var fooData = $(this).data('foo');
      if($.inArray(fooData, array) ==-1)
         array.push(fooData); 
    });

    // wrap all unique data-foo divs in wrap div
    for(var i=0;i<array.length;i++)
    {
        $('[data-foo="'+array[i]+'"]').wrapAll("<div class='wrap'></div>");
    }
});

工作演示

Answer 4

您可以使用.wrapAll() ：

$('[data-foo="ccc"]').wrapAll("<div class='wrap'></div>");
$('[data-foo="bbb"]').wrapAll("<div class='wrap'></div>");
$('[data-foo="aaa"]').wrapAll("<div class='wrap'></div>");

工作演示