なぜwrapAllは無限スクロールで、多くのdivを持っていますか？

Question

最後の質問はここにある： Wrap some divs with Two 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> 

スクロールダウン3つのページが発生した場合：

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

は、この問題を解決するためにどのようにあまりにも多くのleft_columnsとright_columnsのdivタグ がありますか？

Answer 1

あなたは.right_columnsまたは.left_columnsが存在するかどうかをチェックするためにすべきである：

$('.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>'); 
    } 
})