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

Toggle Remove Div's Based On Browser Size

本文关键字：浏览器删除 Div 更新时间：2023-09-26

我写了这个脚本，根据浏览器的窗口大小，在容器中的每第三个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/

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

试试下面的代码片段，然后进行全分页，现在尝试调整页面/窗口的大小。

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

试试下面的代码片段，然后进行全分页，现在尝试调整页面/窗口的大小。