Javascript 如何将一组div包装在div中

我有以下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]

内容是动态生成的。我想不出如何解决这个问题。有人能帮我吗？

你可以使用

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

$（'[data foo=“ccc”]'）。wrapAll（“”）；
$（'[data foo=“bbb”]'）。wrapAll（“”）；
$（'[data foo=“aaa”]'）。wrapAll（“”）；

---

如果您不知道可能的值，可以执行以下操作：

$('#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);
});

$（'#elem[data foo]'）。每个（函数（）{
变量$this=$（this），
$w=$（this.parent（）.find（'.wrap:has（[data foo=“'+$this.data（'foo'）+'”）））；
if（！$w.length）$w=$（''）.addClass（'wrap'）.appendTo（$this.parent（））；
$w.append（本）；
});

试试这个

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

PrevAttr=''；
$（'div#elem div'）。每个（函数（）{
attr=$（this.attr（'data-foo'）；
if（attr！=PrevAttr）
{PrevAttr=attr；
$（'div#elem div[data foo='+attr+']）。wrapAll（''）
}
})

试试这个：

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

$（文档）.ready（函数（）{
var数组=[]；
//获取所有唯一数据foo
$（'#elem div'）。每个（函数（）{
var fooData=$（this.data（'foo'）；
if（$.inArray（fooData，数组）=-1）
array.push（fooData）；
});
//在wrap div中包装所有唯一的数据foo div
对于（var i=0；i
我不能用这种方式。数据foo总是在变化，比如这个
div[data foo='jfn338']
或者这个
div[data foo='i438fu']
好吧，你为什么不获取所有
数据foo
值，然后在它们变化的任何时候（它们必须根据事件、时间变化）重新计算选择器并对其调用
wrapAll
？@RamonVasconcelos:您之前没有提到：\.dystroy和其他人提供了很好的答案。请看他们。
$(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>");
    }
});