为什么jQuery'；s$（）。每个（）函数似乎都在丢失DOM的轨迹？

我最近开始遇到一个非常奇怪的问题。老实说，我不完全确定如何描述它，而只是展示它

以下是相关的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> 

文本1
集装箱2
集装箱3
集装箱4

和相关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')); 
   } 
} 

$（文档）.ready（函数（）{
//将抓取栏添加到页面上的容器组件。
$（'.component'）。每个（wrapComponentForEdit）；
$（'#contentWrapper'）.sortable（）；
$（“#contentWrapper”）.disableSelection（）；
}); 
var wrapComponentForEdit=函数（）
{ 
if（！$（this.hasClass（'noEdit'））{
$（this.html（“”+$（this.html（）+“”）；
$（this.prepend（“”）；
警报（$（this.attr（'id'））；
} 
} 

最终的结果是，我看到一个针对container1、text1、container2、container3、container4的警报弹出。然而，只有容器（而不是文本）最终会进行$（）.each（）应该进行的可视更改

有人知道到底发生了什么吗

谢谢

编辑-另一种方式，但仍然失败

我试过这个，结果也一样：

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

$（文档）.ready（函数（）{
//将抓取栏添加到页面上的容器组件。
var matched=$（'.component'）；
var componentCount=$（匹配）.size（）；
对于（i=0；i

编辑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'));
    }
}

$（文档）.ready（函数（）{
//将抓取栏添加到页面上的容器组件。
var componentCount=$（'.component'）.size（）；
对于（i=0；i

这让我想起了另一个问题

当为下一个（嵌套的）html标记再次调用函数时，可能.html或.prepend命令仍在运行中

当您删除外部组件类时，查看问题是否消失，如下所示：

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

文本1

如果这确实消除了您的问题，那么您将需要想出一种更新html的较慢方法，该方法将等待以前的更改完成

---

有关附加的更多信息，请参见（这里有一些好主意）

使用div而不是只执行

.addClass（）

？div顺序的任何特定原因。我总是遭受相当严重的divitis，但在这里我认为这是有保证的-grabBar有圆形的边缘，需要流畅地改变宽度。圆边还要求构件周围的边界位于抓杆下方。我使用javascript这样做的原因是，这些片段只在某些场景中需要，我不知道问题出在哪里。包装div看起来好像可以很好地应用于所有元素。但是您确实有这个错误：

$（“#contentWrapper”）。sortable不是一个函数

我在这里的示例中没有包含它，但是jQuery UI包含在我的代码中，所以这个错误不是问题。每当我在本地运行此命令时，包装div将应用于container1、2、3和4，而不是text1。从外部元素中删除组件类实际上会使子元素正确呈现。我还尝试将所有内容压缩到一个$（）.html（）中，不做任何更改。