4

<h1>が存在しない場合は、ドキュメント内の最初のヘッダー タグ ( <h2>～のいずれか<h6>) を見つけ、タグのテキストがタイトル テキストと等しい場合は、要素を に変更します<h1 class="heading1">。

これは私が知る限り機能しますが、より効率的な方法で記述する必要があります。

var titleText = $('title').html()
var hOne = $('h1:eq(0)');
var hTwo = $('h2:eq(0)');
var hThree = $('h3:eq(0)');
var hFour = $('h4:eq(0)');
if (hOne.html() == titleText)
{
    return;
}
else if (hTwo.html() == titleText)
{
    var hTwoText = hTwo.html();
    hTwo.replaceWith(function () {
        return '<h1 class="heading1">' + hTwoText + "</h1>";
    });
}
else if (hThree.html() == titleText)
{
    var hThreeText = hThree.html();
    hThree.replaceWith(function () {
        return '<h1 class="heading1">' + hThreeText + "</h1>";
    });
}

else if (hFour.html() == titleText)
{
    var hFourText = hFour.html();
    hFour.replaceWith(function () {
        return '<h1 class="heading1">' + hFourText + "</h1>";
    });
}
4

6 に答える 6

4

それを試してみてください

$(function () {
  var title,
      headerToReplace,
      replacer;

  if ( $('h1').length === 0 ) {
    title = document.title;
    headerToReplace = $(':header').filter(function () {
      return $(this).text() === title;
    });

    if (headerToReplace.length) {
      replacer = $('<h1 />', { 'class': 'heading1', text: 'title' });
      headerToReplace.first().replaceWith(replacer);
    }
  }
});
于 2012-12-13T19:15:18.193 に答える
3

動作確認済み

これを確認するためにjsFiddleで何度も行ったり来たりしたため、良い例はありませんが、複数のh-Tag、既存のh1、存在しないh1、およびあなたの質問に対して考えられる他のすべてのバリエーションに対してこれをテストしました。次の jQuery の単純な 1 行は、「タイトル」タグが複数ある場合を除き、毎回ジョブを実行します。その場合は、フィルターのタイトル呼び出しに .first または .last を追加するだけです。

$('h1, h2, h3, h4, h5, h6').filter(function(i) { return $(this).text() == $("title").text() }).first().each(function(i) { $(this).replaceWith($('<h1>' + $(this).html() + '</h1>')); });
于 2012-12-13T19:10:41.677 に答える
2 
var $firstHeader = ​$('h1, h2, h3, h4, h5, h6').first();​​​​​​​​

if (​​​​​​$firstHeader​[0].tagName !== 'H1' && &firstHeader.text() === $('title').text()) {
    ​​​var headerContent = $firstHeader.html();
    $firstHeader.replaceWith($('<h1 class="heading1"></h1>').html(headerContent);
}
于 2012-12-13T19:15:53.340 に答える
2

次のようなものが機能するはずです。

var hElem, content;

for (var i = 1; i < 7; i++)
{
    //Get the element
    hElem = $("h" + i + ":eq(0)");

    //Make sure at least one element exists
    if ( ! hElem.length)
        continue;

    //If h1 exists, stop here
    if (i == 1)
        break;

    //Get the element's inner text
    content = hElem.text();

    //Replace the element if needed and then stop
    if (content == titleText)
    {
        hElem.replaceWith("<h1 class='heading1'>" + content + "</h1>");
        break;
    }
}
于 2012-12-13T19:09:36.277 に答える
2

このようなものをお探しですか？

function getHeader() {
    var headers = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

    for (var i = 0, z = headers.length; i < z; i++)
    if ($(headers[i]).length) {
        return '<h1 class="heading1">' + $(headers[i]).text() + "</h1>";
    }
}
于 2012-12-13T19:05:39.553 に答える
1

これは、次の場合には役に立ちません。

  • h2-h6要素には、それらの部分文字列としてタイトルが含まれる場合があります
  • タイトルに二重引用符が含まれています

完全一致が必要な場合は、これをさらに調べます。

var titleText = $('title').text();
if (!$('h1:eq(0)').length) {
    var selectors = [], i = 2;
    for (i; i < 7; i++) { 
        selectors.push('h'+i+':contains("'+titleText+'"):eq(0)');
    }
    var $el = $(selectors.join(',')).first();
    $el.replaceWith('<h1 class="heading1">'+$el.text()+'</h1>');
}

デモ

于 2012-12-13T19:14:23.870 に答える