jQuery html（）問題

Question

對於兼容性問題我正在使用生成的HTML，其中包含一個包含鏈接行的表。

只要我加載頁面，我刪除鏈接並將innerHTML轉移到鏈接的父元素。我試着用jQuery方法html()來做這件事。

但我注意到一個有趣的方法，有複雜的事情的行爲。當我將innerHTML從鏈接元素複製到另一個元素時，它會自動分離。我通過將鏈接的innerHTML複製到臨時數組並將其插入到父元素中實現了一種解決方法。

任何人都可以解釋這種行爲嗎？

我使用JavaScript/jQuery代碼：

function rmvMenuLinks() 
    {var txt = new Array(); 
    for(var indx=0; indx < $("td.menuhead").length; indx++) {  
     $("td.menuhead").eq(indx).html($("a.menuhead").eq(indx).html());   
     } 
    $("a.menuhead").detach();              
    } 

Answer 1

難道我理解你的權利，每個td.menuhead元素有一個子元素，在a.menuhead，和你想抓住從這個a元素的HTML和將它填入td而不是a消失的過程中？

如果是這樣的話，我會做這樣的：

function rmvMenuLinks() { 
    $('a.menuhead').each(function(i, a) { 
     var $a = $(a); 
     $a.parent().html($a.html()); 
    }); 
} 

或者，如果你想實際的DOM元素，而無需轉換爲HTML：

function rmvMenuLinks() { 
    $('a.menuhead').each(function(i, a) { 
     var $a = $(a); 
     $a.parent().empty().append($a.contents()); 
    }); 
} 

你列出的原始循環有幾個問題。首先，這是非常低效的。您在每次迭代中運行td.menuhead選擇器兩次，連同a.menuhead選擇器一次。將它與上面的代碼進行比較，它只使用一個選擇器，只運行一次。

更重要的是，我有些懷疑，這個代碼沒有做什麼，你可能會想到的問題：

$("a.menuhead").eq(indx) 

通過循環的第一時間，indx爲0，這給你預期的結果，第一個a.menuhead元素。但是現在代碼會從DOM中刪除該元素，當它設置父元素td的.html()元素時。

所以通過第二次循環時，indx爲1，但你已經刪除了第一a.menuhead，所以現在你引用第三a.menuhead - 或者是什麼爲第三a.menuhead您卸下了前第一。

你跟着我嗎？如果我沒有清楚解釋，請告訴我。

Answer 2

我假設a是td的子元素，然後

function rmvMenuLinks(){ 
    $("td.menuhead").each(function(idx){ 
     var $this = $(this), $a = $this.find('a'); 
     $this.append($a.contents()); 
     $a.remove() 
    }); 
} 

其他

function rmvMenuLinks(){ 
    $("td.menuhead").each(function(idx){ 
     var $a = $("a.menuhead").eq(idx), $this = $(this); 
     $this.append($a.contents()); 
    }); 
    $("a.menuhead").remove(); 
}