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

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

<强> Working Demo

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

<强> Working Demo

如何在div中包含一组div

4 个答案: