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 をアイテムとして扱います。

おそらく、このプラグインは、私が達成しようとしていることに最適なツールではありません。以下が生成されます。

3 つの表示 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 に答える