1

我正在使用这个小包装插件：

https://github.com/tsevdos/nwrapper

(function($) {

$.fn.nwrapper = function(options){

    var defaults = {
        wrapEvery : 1,
        defaultClasses : true,
        extraClasses : false,
        htmlStructure : 'div'
    };

    settings = $.extend({}, defaults, options);

    var elements = $(this).children();
    var elementsLen = elements.length;

    for ( var i = 0, numb = 1; i < elementsLen; i += settings.wrapEvery, numb++ ){

        // Default Classes Array
        var classes = [];
        if ( settings.defaultClasses ) {

            classes[0] = 'wrapper';
            classes[1] = 'wrapper-' + numb;

            if (numb==1) {
                classes[2] = 'first';
            }

            if (numb==Math.ceil(elementsLen/settings.wrapEvery)) {
                classes[2] = 'last';
            }

        }

        // Merge Default class with Extra Class
        if ( settings.extraClasses ) {
            $.merge( classes, settings.extraClasses );
        }

        // If you find any classes crete the class string
        if ( classes.length > 0 ) {
            htmlClassesString = 'class="' + classes.join(" ") + '"';
        } else {
            htmlClassesString = '';
        }

        elements.filter(':eq(' + i + '), :lt(' + (i + settings.wrapEvery) + '):gt(' + i + ')').wrapAll('<' + settings.htmlStructure + ' ' + htmlClassesString + ' />');

    }

    return $(this);
};

})(jQuery);

基本布局将是：

<div id="container">
   <div class="filter1">Value</div>
   <div class="filter2">Value</div> 
   <div class="filter3">Value</div> 
   <div class="filter1">Value</div> 
   <div class="filter2">Value</div> 
   <div class="filter3">Value</div>
   <div class="filter1">Value</div> 
   <div class="filter2">Value</div> 
   <div class="filter3">Value</div>  
   ... 
</div>

初始化插件：

$('#container').nwrapper({ wrapEvery : 3 });

我使用隐藏/显示子 div 的选择过滤器，然后重新初始化插件。我想知道是否可以从包装计数中排除隐藏的 div？

最后我使用 jQuery 循环来显示包装的 div，所以隐藏的 div 应该在包装内（但不计算在内）。否则循环会将每个隐藏的 div 视为一个项目。

也许这个插件不是我想要实现的最佳工具。它将产生以下内容：

我想包装每三个可见的 div，但也包括隐藏的。

<div id="container">
  <div class="wrapper wrapper-1 first">
    <div class="filter1">Value</div>
    <div class="filter2">Value</div>
    <div class="filter3" style="display:none;">Value</div>
    <div class="filter1">Value</div>
  </div>
  <div class="wrapper wrapper-2 last">
    <div class="filter2">Value</div>
    <div class="filter3" style="display:none;">Value</div>
    <div class="filter1">Value</div>
    <div class="filter2">Value</div>
    <div class="filter3" style="display:none;">Value</div>
  </div>
</div>

4

2 回答 2

0

您可以尝试使用:visible选择器，尽管我不确定它在 IE 上的效果如何。

http://api.jquery.com/visible-selector/

于 2012-09-22T11:49:34.517 回答
0

您可以相应地修改插件。喜欢

替换这个：

var elements = $(this).children();

和

var elements = $(this).children(":visible");

==================================================== ====================

@teeraina，就您的问题而言，“我需要将隐藏的 div 包含在包装 div 中（但不计算在内）”您可以试试这个：

var elements = $(this).children();
var elementsLen = $(this).children(":visible").length;

希望这会有所帮助！

于 2012-09-22T11:50:41.317 回答