javascript - 将 div 元素替换为链接

Question

我正在使用以下代码替换链接:

function replaceLink(href_array){
    $('.externalLink').each(function(index){
        $(this).replaceWith(function() {
            if ($(this).text() != "") {
                return $('<a />').append($(this).contents()).attr('href', href_array[index]);
            }
            else { // do not use
                return $('<a />').append(href_array[index]).attr('href', href_array[index]);
            }
        });
    });
};

初始页面结构如下:

body 
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
/body

脚本之后应该是:

body 
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
/body

但结果是这样的:

body 
    p /p a#href
    p /p a#href 
    p /p a#href
    p /p a#href
    p /p a#href
    p /p a#href
/body

我该如何纠正这个问题？

at the bottom as it should be on top of how it turns out

Answer 1

您正在 p 标签内创建 div 标签，这是不正确的，开始的 div 标签将自动关闭 p 标记在它之前，因此 replaceWith 无法正常工作。

在 div 中尝试一个 div。

来源 - Why can't the <p> tag contain a <div> tag inside it?

var href_array = [
  "Href1", "Href2", "Href3", "Href4", "Href5", "Href6"
]

function replaceLink(href_array) {
  $('.externalLink').each(function(index) {
    $(this).replaceWith(function() {
      if ($(this).text() != "") {
        return $('<a />').append($(this).contents()).attr('href', href_array[index]);
      } else { // do not use
        return $('<a />').append(href_array[index]).attr('href', href_array[index]);
      }
    });
  });
}

replaceLink(href_array)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="externalLink">A</div>
</div>
<div>
  <div class="externalLink">B</div>
</div>
<div>
  <div class="externalLink">C</div>
</div>
<div>
  <div class="externalLink">D</div>
</div>
<div>
  <div class="externalLink">E</div>
</div>
<div>
  <div class="externalLink">F</div>
</div>