jQuery每個循環加倍發現的結果

這裏是我的html：

<div id="result"> 
    <div class="selectable" data-id="1"> Item 1 </div> 
    <div class="selectable" data-id="2"> Item 2 </div> 
    <div class="selectable" data-id="3"> Item 3 </div> 
    <div class="selectable" data-id="4"> Item 4 </div> 
    <div class="selectable" data-id="5"> Item 5 </div> 
</div> 

<button class="insert">Insert</button> 

<div id="master"></div>

這裏是JS：

$(document).ready(function() { 
     $("#result").on('click', '.selectable', function() { 
      if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 
      } else { 
       $(this).addClass('active'); 
      } 
     }); 

     $(".insert").on('click', function() { 
      var html = ''; 
      $("#result .active").each(function() { 
       var id = $(this).data('id'); 
       html += '<div class="rows"> ' + id + ' </div>'; 
      }); 
      $("#master").prepend(html) 
     }); 
    });

選擇和取消選擇「.selectable」項目工作正常，但如果選擇了兩個項目的部分原因，HTML插入「主」div總是翻倍，所以我得到4項而不是兩項。

我認爲問題出現在每個循環中，如果我在循環之前執行類似console.log($("#result .highlite").length); 的操作，將顯示正確數量的選定項目。

來源

2016-10-30 Alko

我運行了你的代碼片段，如果你想堆疊已經「插入」的項目，我似乎沒事。但是，如果要完全替換已插入的項目，而不是使用'.prepend'，請嘗試使用'.html'方法：'$（「＃master」）。html（html）'。那是你想要達到的目標嗎？ –

我想預先安排項目，因爲我已經有一些內部主div。 – Alko

看來你應該每個按鈕被點擊

時間更換HTML嘗試改變」

$("#master").prepend(html)

要

$("#master").html(html)

來源

2016-10-30 17:42:22 charlietfl

不，實際上，我已經有一些內部主div的項目，我想預先他們，而不是取代他們。 – Alko

創建一個演示，重現問題 – charlietfl

-1

你可以試試下面的jQuery代碼：

$(document).ready(function() { 
     $("#result").on('click', '.selectable', function() { 
     $(".selectable").removeClass('active'); 
     $(this).addClass('active');   
     }); 

     $(".insert").on('click', function() { 
      var html = ''; 
      $("#result .active").each(function() { 
       var id = $(this).data('id'); 
       html += '<div class="rows"> ' + id + ' </div>'; 
      }); 
      $("#master").prepend(html) 
     }); 
    });

DEMO

希望它能解決您的問題。

謝謝

來源

2016-10-30 18:02:20

爲什麼負面.. ?? –

jQuery每個循環加倍發現的結果

回答

相關問題