這個腳本讓我瘋狂，它的主要特點是避免長標題上的孤兒。避免剝離標記

一切都運行良好，直到我意識到如果我在<h1>（在這種情況下爲<a href="#">）添加了任何標記，標記會被剝離，因此鏈接將丟失。

這是當前的腳本：

$('h1').each(function() { 
    var wordArray = $(this).text().split(' '); 
    if (wordArray.length > 1) { 
    wordArray[wordArray.length-2] += '&nbsp;' + wordArray[wordArray.length-1]; 
    wordArray.pop(); 
    $(this).html(wordArray.join(' ')); 
    } 
});

這裏有一個simple demo。

任何指導非常感謝。

感謝，

來源

2013-10-18 Ricardo Zea

的問題來自於您的.text()功能的使用獲得的內容頭。這會自動去除任何標記，只返回文本節點。你需要做的就是讓HTML（使用.html()而不是.text()），然後檢查結束標記中的最後一個字的結尾存在附加回新的內容爲你的頭元素：

$('h1').each(function() { 
    var wordArray = $(this).html().split(' '); 
    if (wordArray.length > 1) { 
     wordArray[wordArray.length-2] += '&nbsp;' + wordArray[wordArray.length-1]; 

     var lastWord = wordArray.pop(); 
     lastWord = lastWord.replace(/.*((?:<\/\w+>)*)$/, '$1'); 
     $(this).html(wordArray.join(' ') + lastWord); 
    } 
});

jsFiddle demo

來源

2013-10-18 14:54:24

'.html（）'，明白了。這工作完美無瑕。對於我來說，JavaScript的困難之處在於像你剛剛解釋過的抽象概念，但我到了那裏。非常感謝你的幫助！ –

$(this).html(wordArray.join(' ')); //Line causing the issue.

由於您更換整個html內h1超鏈接將消失。的

所以不是針對h1，改變腳本來處理a標籤像下面

$('h1 a').each(function() { 
    var wordArray = $(this).text().split(' '); 
    if (wordArray.length > 1) { 
    wordArray[wordArray.length-2] += '&nbsp;' + wordArray[wordArray.length-1]; 
    wordArray.pop(); 
    $(this).html(wordArray.join(' ')); 
    } 
});

入住這JSFiddle

來源

2013-10-18 03:59:05 Praveen

這假設他們從不想在不包含錨點的標題上調用它，並且標題的整個文本都包含在錨點元素中。 –

好吧，那很容易:)。但是，如果您在其中添加任何其他類型的標記，它也會被剝離出來，例如''會被取出：'

Looong heading that could end up with orphans...

'。我嘗試添加另一個選擇器，比如'$（'h1 a，h1 a span'）'甚至全局選擇器'$（'h1 *'）'，但即使使用此全局選擇器，儘管保留了''，但''被剝離。任何想法爲什麼？男人，這個腳本是接近完美的解決方案。更新** [演示]（http://jsfiddle.net/FbRZk/13/）**。提前致謝！ –

@AnthonyGrist，你說得對，如果我們的標題既有鏈接又沒有鏈接？還有內聯標記以及上面我再次描述的內容？這個腳本也應該考慮到這一點。但問題是'如何'？我認爲這個劇本幾乎就在那裏。 –

避免剝離標記

回答

Looong heading that could end up with orphans...

相關問題