jQuery計數類中的元素

Question

任何人都可以解釋爲什麼alert($('.letter').length);返回（4）當你將一個字母放入這個jsfiddle的灰色框？

Fiddle

$(function() { 
    $('.drag').draggable({ 
     cursor: 'move', 
     revert: 'invalid', 
     helper: 'clone', 
    }); 
    $('.droppable').droppable({ 
     hoverClass: "ui-state-hover", 
     accept: function (event, ui) { 
      return true; 
     }, 
     drop: function (event, ui) { 
      var correct = 0; 
      var dropId = $(this).attr('id'); 
      var letterId = $(ui.draggable).attr('id'); 
      var letId = dropId.substring(0, 1); 
      var count = $(this).children().length; 

      if (count < 1) { 
       if (letterId == dropId) { 
        $(this) 
         .addClass("correct"); 
        $(this).append(ui.draggable); 
       } else { 
        $(this) 
         .addClass('wrong'); 
        $(this).append(ui.draggable); 
       } 
      } 
      $('.droppable').each(function() { 
       var letId = $(this).children().attr('id'); 
       var dropId = $(this).attr('id'); 

       if (letId === undefined) { 
        $(this).removeClass('correct'); 
        $(this).removeClass('wrong'); 
       } 
       if (letId == dropId) { 
        correct++; 
       } 
      }); 
      alert($('.letter').length); 
     } 
    }); 
}); 

如果你刪除了第二封信到第二個框，你仍然可以獲得4，所以我沒有看到附加做任何事情。

Answer 1

還有當時與.letter類頁面上的克隆幫手，讓所有在那個時間點的網頁上找到的元素的長度爲4

我已經更新了小提琴提醒最後一個元素的class，這是輔助類（可以通過附加到元素的dragging類來判斷）。

Fiddle

爲了得到排除助手的所有字母的計數，試試這個選擇：

$('.letter:not(".ui-draggable-dragging")'); 

由於助手被拖動的對象，jQuery的UI添加一個dragging類吧你可以輸入。

Fiddle with updated count