切换基于浏览器大小删除Div

Question

我已经编写了此脚本，该脚本根据浏览器的窗口大小在容器中的每个第3个Div之后添加一个Div。

我下面的内容可以正常工作， 但只能运行一次！ 因此，它将添加div并将其删除，但是如果再次调整窗口的大小，则不会再次添加它们。

我该如何做才能重新添加div（如果已将其删除）？

 var addNth = (function () {
    var len, i = 0, className, prevIndexes = [];

    function isNew (el) {
         return el.hasClass(className); // removed unnecessary parenthesis
    }

    return function (selector, html, nth, className ) {
        var els = $( selector );
        className = className || 'test';

        if ( $.inArray(nth, prevIndexes) === -1 ) {
            prevIndexes.push(nth);

            $.each(els, function( index, el ) {
                el = $(el);
                if ( (i % nth) === 0 && i !== 0 ) {
                    if ( ! isNew(el) ) {
                        el.before( html );
                    }
                }
                i++;
            });
            i = 0;
        }
    }

})();
addNth('div.aDiv','<div class="myClass">Some Content</div>',3);
$(window).resize(function(e) {
   var windowWidth = $(this).width(),
      $myClass = $('div.myContainer > div.myClass');

   if (windowWidth > 1024 && windowWidth < 1700) {
    addNth('div.aDiv','<div class="myClass">Some Content</div>',3);
   }
   else {
    $myClass.remove();
   }
});

JSFiddle： https ：//jsfiddle.net/9vmg35sL/

Answer 1

您可以通过添加||来解决问题。 $ .inArray（nth，prevIndexes）=== 0到addNth（）中的if语句。

在下面尝试我的代码段，然后全页显示，然后尝试调整页面/窗口的大小。

或jsFiddle： http : //jsfiddle.net/dk5tLb19/2/

 var addNth = (function () { var len, i = 0, className, prevIndexes = []; function isNew (el) { return el.hasClass(className); // removed unnecessary parenthesis } return function (selector, html, nth, className ) { var els = $( selector ); className = className || 'test'; if ( $.inArray(nth, prevIndexes) === -1 || $.inArray(nth, prevIndexes) === 0 ) { prevIndexes.push(nth); $.each(els, function( index, el ) { el = $(el); if ( (i % nth) === 0 && i !== 0 ) { if ( ! isNew(el) ) { el.before( html ); } } i++; }); i = 0; } } })(); addNth('div.aDiv','<div class="myClass">Some Content</div>',3); var divExists = true; $(window).resize(function(e) { var windowWidth = $(this).width(), $myClass = $('div.myContainer > div.myClass'); if (windowWidth > 1024 && windowWidth < 1700) { if(!divExists) { addNth('div.aDiv','<div class="myClass">Some Content</div>',3); divExists = true; } } else { $myClass.remove(); divExists = false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myContainer"> <div class="aDiv">1</div> <div class="aDiv">2</div> <div class="aDiv">3</div> <div class="aDiv">4</div> <div class="aDiv">5</div> <div class="aDiv">6</div> <div class="aDiv">7</div> <div class="aDiv">8</div> <div class="aDiv">9</div> <div class="aDiv">10</div> <div class="aDiv">11</div> <div class="aDiv">12</div> <div class="aDiv">13</div> <div class="aDiv">14</div> <div class="aDiv">15</div> </div> 

在下面尝试我的代码段，然后全页显示，然后尝试调整页面/窗口的大小。