將 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

我該如何糾正？

在底部，因為它應該在結果之上

Answer 1

您正在p標簽內創建div標簽，這是不正確的，打開的div標簽將自動關閉它之前的p標簽，因此replaceWith工作不正確。

試試div里面的div 。

Source - 為什么 <p> 標簽里面不能包含 <div> 標簽？

 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>