jQuery的包装忽略隐藏的div

Question

我用这个小插件封装：

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

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

最后，我使用jquery循环来显示包装的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> 
     <div class="wrapper wrapper-2">  
      <div class="filter1">Value</div> 
      <div class="filter2">Value</div> 
      <div class="filter3" style="display:none;">Value</div> 
     </div>    
     <div class="wrapper wrapper-3 last">    
      <div class="filter1">Value</div> 
      <div class="filter2">Value</div> 
      <div class="filter3" style="display:none;">Value</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> 

Answer 1

您可以尝试使用:visible选择器，虽然我不确定它在IE上的工作情况。

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

Answer 2

可以accrodingly修改插件。像

替换此：

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

随着

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

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

@teeraina，In您的问题的条款“我需要将隐藏的div包含在包装div（但不包括在内）”您可以试试这个：

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

希望这会有所帮助！