0

このスクリプトは私を夢中にさせます。その主な機能は、長い見出しの孤立を避けることです。

<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(' '));
  }
});

これは簡単なデモです。

どんなガイダンスも大歓迎です。

ありがとう、

4

2 に答える 2

1

問題は、.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 デモ

于 2013-10-18T14:54:24.680 に答える
1 
$(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-18T03:59:05.957 に答える