jQuery包装元素 [英] jquery to wrap elements

问题描述

我有这段代码，每隔3个就需要用div包裹

I have this code and every 3 's I need to wrap with a 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>

推荐答案

我整理好了这个插件，

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

您传入一个选项对象定义

You pass in an options object defining

• childElem-要包装的直接子元素的元素nodeType
• sets-如何对子元素进行分组.例如，您的情况下为3套.默认值为1
• wrapper-用于包装子元素的元素.默认为<div>

• childElem - the element nodeType of the immediate children to wrap
• sets - how you want to group the child elements. For example, sets of 3 in your case. Default is 1
• wrapper - the element to wrap the child elements in. default is <div>

对测试数据使用类似的方法.

Use like so on your test data.

$(function() {

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

});

这是一个> 工作演示 .将/edit 添加到URL以便与代码一起播放.

Here's a Working Demo to play with. Add /edit to the URL to play with the code.

如果很有用，我很想把它做成一个更加完善的插件..

我创建了 的改进版本插件

这篇关于jQuery包装元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！