Почему функция jQuery $ (). Each (), похоже, теряет DOM?

Question

Недавно я столкнулся с очень странной проблемой. Если честно, я не совсем уверен, как описать это, кроме как просто показать это.

Вот соответствующий HTML:

<div class="component container w100 noEdit" id="contentWrapper"> 
<div class="component container w50" id="container1"> 
   <div class="component text w50" id="text1"> 
      Text1 
   </div> 
</div> 
<div class="component container w25" id="container2"> 
   Container2 
</div> 
<div class="component container w25" id="container3"> 
   Container3 
</div> 
<div class="component container w25" id="container4"> 
   Container4 
</div> 
</div> 

и соответствующий JavaScript:

$(document).ready(function () { 
   //Add the Grab Bar to container components on the page. 
   $('.component').each(wrapComponentForEdit); 
   $('#contentWrapper').sortable(); 
   $('#contentWrapper').disableSelection(); 
}); 

var wrapComponentForEdit = function() 
{ 
   if (!$(this).hasClass('noEdit')) { 
      $(this).html('<div class="componentBorder">' + $(this).html() + '</div>'); 
      $(this).prepend('<div class="grabBar_l"><div class="grabBar_r"><div class="grabBar"></div></div></div>'); 
      alert($(this).attr('id')); 
   } 
} 

Конечным результатом этого является то, что я вижу всплывающее предупреждение для container1, text1, container2, container3, container 4. И все же только контейнеры (не текст) заканчиваются визуальными изменениями, которые $ (). каждый () должен сделать.

Кто-нибудь имеет представление о том, что, черт возьми, происходит?

Спасибо!

РЕДАКТИРОВАТЬ - другой способ сделать это, но по-прежнему не удается

Я пробовал это, с тем же результатом:

$(document).ready(function () {
    //Add the Grab Bar to container components on the page.
    var matched = $('.component');
    var componentCount = $(matched).size();
    for (i = 0; i < componentCount; i++)
    {
        wrapComponentForEdit($(matched).eq(i));
    }
    $('#contentWrapper').sortable({ handle: '.grabBarBit', tolerance: 'pointer'});
    $('#contentWrapper').disableSelection();
});

var wrapComponentForEdit = function(component)
{
    if (!$(component).hasClass('noEdit')) {
        $(component).html('<div class="grabBar_l grabBarBit"><div class="grabBar_r grabBarBit"><div class="grabBar grabBarBit"></div></div></div><div class="componentBorder">' + $(component).html() + '</div>');
        alert($(component).attr('id'));
    }
}

РЕДАКТИРОВАТЬ 2: Другой альтернативный метод, но этот работает

Я попробовал другой способ сделать что-то, и это работает. Тем не менее, первоначальный вопрос остается в силе. Судя по тому, как работает этот новый способ, мне кажется, что DOM обновляется, но jQuery не обновляется с ним, поэтому он теряет отслеживание дочернего элемента.

$(document).ready(function () {
    //Add the Grab Bar to container components on the page.
    var componentCount = $('.component').size();
    for (i = 0; i < componentCount; i++)
    {
        wrapComponentForEdit($('.component').eq(i));
    }
    $('#contentWrapper').sortable({ handle: '.grabBarBit', tolerance: 'pointer'});
    $('#contentWrapper').disableSelection();
});

var wrapComponentForEdit = function(component)
{
    if (!$(component).hasClass('noEdit')) {
        $(component).html('<div class="grabBar_l grabBarBit"><div class="grabBar_r grabBarBit"><div class="grabBar grabBarBit"></div></div></div><div class="componentBorder">' + $(component).html() + '</div>');
        alert($(component).attr('id'));
    }
}

Answer 1

Это напоминает мне еще один вопрос

дождаться завершения предыдущего .append () (jquery) .

Возможно, команды .html или .prepend все еще находятся в полете, когда функция вызывается снова для следующего (вложенного) тега html.

Посмотрите, исчезнет ли проблема при удалении класса внешнего компонента следующим образом:

<div class="container w50" id="container1"> 
   <div class="component text w50" id="text1"> 
      Text1 
   </div> 
</div>

Если это устранит вашу проблему, вам нужно будет найти более медленный способ обновления html, который ожидает завершения предыдущих изменений.

См. 43,439 причин для правильного использования append () для получения дополнительной информации о Append (некоторые хорошие идеи там)