javascript - why the wrapAll in infinite-scroll, have many divs? -
the last question here: wrap divs 2 different columns
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script type="text/javascript"> $('.wrapper').each(function() { $(this).find(".lpost").wrapall('<div class="left_columns"></div>') $(this).find(".rpost").wrapall('<div class="right_columns"></div>') }) </script> <div class="wrapper"> <div class="rpost">-115</div> <div class="lpost">-91</div> <div class="lpost">-99</div> <div class="rpost">-181</div> <div class="lpost">-19</div> <div class="rpost">-135</div> <div class="rpost">-85</div> <div class="lpost">-39</div> </div> <script type="text/javascript"> var $container = $('.wrapper').infinitescroll({ path: '.next-post', append: '.post', hidenav: '.pagination', status: '.page-load-status', }); $container.on('append.infinitescroll', function(event, response, path, items) { $(function() { $('.wrapper').each(function() { $(this).find(".lpost").wrapall('<div class="left_columns"></div>') $(this).find(".rpost").wrapall('<div class="right_columns"></div>') }) }); }); </script>
if scroll down 3 pages result:
<div class="wrapper"> <div class="left_columns"> <div class="left_columns"> <div class="left_columns"> <div class="lpost">-91</div> <div class="lpost">-99</div> <div class="lpost">-19</div> <div class="lpost">-39</div> </div> </div> </div> </div>
have many left_columns , right_columns divs how fix this?
you should check if .right_columns
or .left_columns
exists or not:
$('.wrapper').each(function() { var lpost = $(this).find(".lpost"), rpost = $(this).find(".rpost"), lcol = $(this).find('.left_columns'); if(lcol.length){ var rcol = $(this).find('.right_columns'); lpost.appendto(lcol); rpost.appendto(rcol); }else{ lpost.wrapall('<div class="left_columns"></div>'); rpost.wrapall('<div class="right_columns"></div>'); } })
Comments
Post a Comment