jquery包装元素

时间:2009-09-09 16:53:09

标签: jquery

我有这个代码,每3个我需要用div包装

(原)

<div id="entries"> 
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>

(应该成为)

<div id="entries"> 
<div>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
<div>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
<div>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
</div>

4 个答案:

答案 0 :(得分:5)

我把这个插件放在一起很好地完成了这项工作

(function($){

   $.fn.wrapChildren = function(options) {

    var options = $.extend({
                              childElem : undefined,
                              sets : 1,
                              wrapper : 'div'
                            }, options || {});
    if (options.childElem === undefined) return this;

 return this.each(function() {
  var elems = $(this).children(options.childElem);
  var arr = [];

  elems.each(function(i,value) {
    arr.push(value);
    if (((i + 1) % options.sets === 0) || (i === elems.length -1))
   {
     var set = $(arr);
     arr = [];
     set.wrapAll($("<" + options.wrapper + ">"));
   }
  });
    });

  }

})(jQuery);

传入定义

的选项对象
  • childElem - 要包装的直接子节点的元素nodeType
  • sets - 您希望如何对子元素进行分组。例如,在您的情况下为3组。默认值为1
  • wrapper - 包含子元素的元素。默认为<div>

在测试数据上使用如此。

$(function() {

  $('#entries').wrapChildren({ childElem : 'a' , sets: 3});

});

这是一个Working Demo。将 / edit 添加到网址以播放代码。

修改

我很想把它变成一个更完善的插件,如果证明有用的话。

我创建了an improved version of the plugin

答案 1 :(得分:2)

强大的工作,可能不是最聪明的事情:

var $entries = $("#entries");
var $div = $('<div></div>').appendTo($entries);
while($div.next().length > 0){
  $div.append($div.nextAll().slice(0,3));
  $div = $('<div></div>').appendTo($entries);
}

答案 2 :(得分:0)

将一个类应用于每个水平填充内容的“sub-div”,并​​将其赋予clrar:both;作为css属性,它将显示您想要的方式。如果您想垂直显示它,请应用float:left;代替。

答案 3 :(得分:0)

var $c = $('#entries');
while ($c.children('a').length) {
    $c.children('a:lt(3)').wrapAll('<div>');
}

http://jsfiddle.net/alnitak/sppgP/

的工作演示(尽管有不同的HTML结构)