Javascript jQuery分别与replaceWith issue结合使用

我试图用一个类遍历每个元素，然后用div包装它，然后继续下一个

目前正在使用此

$('.img-editable').each(function(i) {
    if ($(this).prop("tagName") == "IMG") {
        $(this).replaceWith('<span class="img-edit-container">'+this.outerHTML+'<button class="btn btn-default btn-sm img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button></span>');
    } else {
        $(this).replaceWith('<span class="img-edit-container bg-img-edit-container">'+this.outerHTML+'<button class="btn btn-default bg-img-edit img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button></span>');
    }
});

这完全失败了

我很想知道我们如何克服这个问题？在执行

replaceWith（）

之后，有没有办法维护DOM引用，或者我们可以更新它

TL；DR在对选定元素执行

replacetwith

in循环后，子元素引用似乎中断，并且这些元素未成功更新

谢谢

---

解决方案如下所示

$（'.img可编辑'）。每个（函数（i）{
if（$（this.prop（“标记名”）=“IMG”）{
$（此）.wrap（“”）；
$（本）。在（''）之后；
}否则{
$（此）.wrap（“”）；
$（本）。在（''）之后；
}
});

jQuery提供了一种方法，可以完全满足您的需要

这里有一个演示

$（'body>div'）。每个（函数（）{
$（此）.wrap（“”）；
});
.wrapper{
边框：1个实心番茄；
边缘底部：20px；
}

正规元素
简单内联元素
更多的东西
jQuery提供了一种方法，可以完全满足您的需要

这里有一个演示

$（'body>div'）。每个（函数（）{
$（此）.wrap（“”）；
});
.wrapper{
边框：1个实心番茄；
边缘底部：20px；
}

正规元素
简单内联元素
更多的东西
尝试api和
每个

$( ".img-editable" ).wrapAll( "<span class='img-edit-container'/>");

$(".img-edit-container .img-editable").each( function(){
  if ( $( this ).prop("tagName") == "IMG" )
  {
    $(this).parent().append ( '<button class="btn btn-default btn-sm img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );
  }
  else
  {
    $(this).parent().append ( '<button class="btn btn-default bg-img-edit img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );
  }
});

$（“.img可编辑”）.wrapAll（“”）；
$（“.img edit container.img editable”）.each（函数（）{
if（$（this.prop（“标记名”）=“IMG”）
{
$（this.parent（）.append（“”）；
}
其他的
{
$（this.parent（）.append（“”）；
}
});

甚至更简单

$( ".img-editable" ).wrapAll( "<span class='img-edit-container'/>");

$(".img-edit-container").append( '<button class="btn btn-default bg-img-edit img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );

$(".img-edit-container img.img-editable").siblings( "button" ).toggleClass( "btn-sm" ).toggleClass( "bg-img-edit" );

$（“.img可编辑”）.wrapAll（“”）；
$（“.img编辑容器”）.append（“”）；
$（“.img edit container img.img editable”）.同胞（“按钮”）.toggleClass（“btn sm”）.toggleClass（“bg img edit”）；
尝试api和
每个

$( ".img-editable" ).wrapAll( "<span class='img-edit-container'/>");

$(".img-edit-container .img-editable").each( function(){
  if ( $( this ).prop("tagName") == "IMG" )
  {
    $(this).parent().append ( '<button class="btn btn-default btn-sm img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );
  }
  else
  {
    $(this).parent().append ( '<button class="btn btn-default bg-img-edit img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );
  }
});

$（“.img可编辑”）.wrapAll（“”）；
$（“.img edit container.img editable”）.each（函数（）{
if（$（this.prop（“标记名”）=“IMG”）
{
$（this.parent（）.append（“”）；
}
其他的
{
$（this.parent（）.append（“”）；
}
});

甚至更简单

$( ".img-editable" ).wrapAll( "<span class='img-edit-container'/>");

$(".img-edit-container").append( '<button class="btn btn-default bg-img-edit img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );

$(".img-edit-container img.img-editable").siblings( "button" ).toggleClass( "btn-sm" ).toggleClass( "bg-img-edit" );

$（“.img可编辑”）.wrapAll（“”）；
$（“.img编辑容器”）.append（“”）；
$（“.img edit container img.img editable”）.同胞（“按钮”）.toggleClass（“btn sm”）.toggleClass（“bg img edit”）；
接受这个答案，因为它对我有效，是第一个回答。虽然看起来像是
wrapAll
实际上可能更快。我将用完整的解决方案更新我的问题。谢谢你的快速帮助！为所有选定元素创建一个包装，同时为每个元素创建一个包装。这取决于你想要什么。接受这个答案，因为它对我有效，而且是第一个回答。虽然看起来像是
wrapAll
实际上可能更快。我将用完整的解决方案更新我的问题。谢谢你的快速帮助！为所有选定元素创建一个包装，同时为每个元素创建一个包装。这取决于你想要什么。谢谢你，这看起来是一个快速实现这一目标的方法，我甚至可以跳过这个。每一个我认为需要一些工作。不过，我接受了第一个答案，因为它也起了作用。但我认为这是一个聪明的方法！谢谢你的分享，你比我早到了。。。我知道有可能跳过这一步。每一步都是如此！谢谢谢谢你，这看起来是一个快速实现这一目标的方法，我甚至可以跳过。每一个我认为有一些工作。不过，我接受了第一个答案，因为它也起了作用。但我认为这是一个聪明的方法！谢谢你的分享，你比我早到了。。。我知道有可能跳过这一步。每一步都是如此！非常感谢。
$( ".img-editable" ).wrapAll( "<span class='img-edit-container'/>");

$(".img-edit-container").append( '<button class="btn btn-default bg-img-edit img-edit popover-trigger"><i class="fa fa-file-image-o"></i></button>' );

$(".img-edit-container img.img-editable").siblings( "button" ).toggleClass( "btn-sm" ).toggleClass( "bg-img-edit" );