当前位置: 首页 > 知识库问答 >
问题:

包装器忽略jQuery中的隐藏div

阎懿轩
2023-03-14

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

https://github.com/tsevdos/n包装器

(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 filters隐藏/显示childrevs,然后重新初始化插件。我想知道是否可以将隐藏的divs从包装计数中排除?

最后,我使用jQuery循环来显示包装的DIV,所以隐藏的DIV应该在包装内(但不计算)。否则,cycle将把每个隐藏的div视为一个项。

也许这个插件不是我想要实现的最优工具。它将产生以下成果:

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

null

<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>

null

共有2个答案

后烨煜
2023-03-14

您可以相应地修改插件。就像

替换此:

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

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

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

@Teeraina,关于你的问题“我需要隐藏的divs包含在wrap divs中(但不计算在内)”,你可以试试这个:

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

希望这会有所帮助!!

淳于鹏
2023-03-14

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

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

 类似资料:
  • 我有这个代码,可以获取股票价格。所有股票符号都在一个表列表中,现在如果该符号不在观察列表中,其行将被隐藏。我现在面临的挑战或我想要实现的是忽略这些隐藏的行来获取其股价。我只是想让代码忽略它。提前谢谢你的帮助。 当前结果是这样的(那些在观察列表中为“否”的是隐藏行,但代码仍然返回其价格): 行符号价格观察列表(过滤器) 1 ABS 17是的 2 BDO 19号 3 NIKL 4是的 4技术5号 5

  • 问题内容: 我的python脚本执行一个路径,其中路径是一个队列,其中包含我需要一个一个对待的档案。 问题是我将列表放入数组中,然后执行一个简单的。直到我将项目置于颠覆状态之前,一切都很好。现在,我将文件夹保存在数组中,这当然会使我的应用程序崩溃。 所以这是我的问题:是否有一个函数在执行时会忽略隐藏文件,如果不是,那是最好的方法? 问题答案: 您可以自己写一个: 或者您可以使用glob: 这些文件

  • 本文向大家介绍如何在Python中使用os.listdir()忽略隐藏文件?,包括了如何在Python中使用os.listdir()忽略隐藏文件?的使用技巧和注意事项,需要的朋友参考一下 在Unix OS(OSX,Linux等)上,隐藏文件以“。”开头。因此我们可以使用简单的startwith check过滤掉它们。在Windows上,我们需要检查文件属性,然后确定文件是否隐藏。 示例 例如,您可

  • 附加器 和3个记录器: 记录器1 null

  • 主要内容:实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦! 因为时间是宝贵的,我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和

  • .../...............................................................................不包括在Android中:javax.lang.model.util。引用自dagger.internal.codegen.GraphAnalysisErrorHandler。 ../../../../../../..gradle/c