Question

所以我有一个用户插入信息的div。它通常看起来像这样：

<div id="description">
  <p>Some introduction the user wrote</p>
  <p>Some paragraph text here that the user wrote</p>
  <img src="/path/to/first-image" /><span class="credit">Copyright Text</span>
  <p>More stuff that the user wrote and then he decides to insert an image. 
   So we get this inserted inline <img src="/path/to/second-image" /><span class="credit">Copyright Text</span></p>
</div>

我无法在<img>标记中插入<p>个标记。它破坏了页面。那么我该怎样切割＆＃39; <img>以及带有版权文字的相应<span>标记，并将其全部插入到它所在的<p>标记之后？所以我最终得到了这个：

<div id="description">
  <p>Some introduction the user wrote</p>
  <p>Some paragraph text here that the user wrote</p>
  <img src="/path/to/first-image" /><span class="credit">Copyright Text</span>
  <p>More stuff that the user wrote and then he decides to insert an image. 
  So we get this inserted inline</p>
 <img src="/path/to/second-image" /><span class="credit">Copyright Text</span>
</div>

Answer 1

如果我理解你，你想删除最后一个img并跨越<p> 您可以将图像和范围存储在变量var temp = $("#description p > img, p > span.client");

中

获得临时变量后，您需要通过var parent = $(temp).parent();

获取父级

完成后，您需要移除想象和范围$("#description p > img, p > span.client").remove();

最后，您只需将temp变量附加到div parent.after(temp);

即可

Answer 2

以下是应用.each()和.detach()功能的替代方案。该解决方案尚未经过彻底测试，但至少在上述情况下，这似乎有效。我希望你能找到它:-)

 var start = new Date().getTime();

//loop each paragraph that is child of div description
$("div#description > p").each(function(outerIndex) {

  $elem = $(this);

  //look for img or span element that is preceded (+) by img
  $elem.find("img, img + span").each(function(innerIndex) {

    if (innerIndex == 0) {
      //create temporaty extra div that is later removed            
      $elem.after($("<p id='temp'>"));
    }

    //append found element into temp div
    $("#temp").append($(this));

  });

  //detach children in temp div
  $tempChildren = $("#temp").children().detach();

  //append those after
  $("#temp").after($tempChildren);

  //remove temp div
  $("#temp").remove();

});

var end = new Date().getTime();
var time = end - start;

console.log("duration in milliseconds: " +time);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="description">
  <p>Some introduction the user wrote</p>
  <p>Some paragraph text here that the user wrote</p>
  <img src="http://www.w3schools.com/tags/smiley.gif" /><span class="credit">Copyright Text</span>

  <p>More stuff that the user wrote and then he decides to insert an image. So we get this inserted inline
    <img src="http://www.w3schools.com/tags/smiley.gif" /><span class="credit">Copyright Text</span>

  </p>
</div>

更新了，这是使用较少jQuery方法调用的另一种方法：

var start = new Date().getTime();

      //loop each paragraph that is child of div description
     $("div#description > p").each(function(outerIndex) {

       $elem = $(this);

       //look for img or span element that is preceded (+) by img
       $elem.find("img, img + span").each(function(innerIndex) {

         if (innerIndex == 0) {

           $elem.after($(this));

           $elemMoved = $(this);

         } else {

           $elemMoved.after($(this));

           $elemMoved = $(this);
         }
       });
     });

     var end = new Date().getTime();
     var time = end - start;

     console.log("duration in milliseconds: " + time);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="description">
          <p>Some introduction the user wrote</p>
          <p>Some paragraph text here that the user wrote</p>
          <img src="http://www.w3schools.com/tags/smiley.gif" /><span class="credit">Copyright Text</span>

          <p>
              More stuff that the user wrote and then he decides to insert an image. So we get this inserted inline
              <img src="http://www.w3schools.com/tags/smiley.gif" /><span class="credit">Copyright Text</span>

          </p>
      </div>

我的计算机上处理的持续时间平均约为6-7毫秒，并且比原始代码平均快了大约7-8毫秒。然而，当我在Stackoverflow上运行测试时，时间相当快，新功能大约1-2毫秒，旧功能大约3-4毫秒。也许用原生JavaScript可以实现最快的处理。

如何删除内联元素并将其插入父块元素之后？

2 个答案: