Question

如果<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>";
    });
}

Answer 1

确认工作

我没有一个很好的例子，因为这在jsFiddle上进行了许多来回确认，但是我已经针对多个h-Tag，现有的h1，不存在的h1以及我想到的所有其他变体进行了测试你的问题。以下1个简单的jQuery行每次都会完成这项工作，除非有多个“title”标签，在这种情况下只需将.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>')); });

Answer 2

Try it

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

Answer 3

你在找这样的东西吗？

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>";
    }
}

Answer 4

以下内容应该有效：

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;
    }
}

Answer 5

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

Answer 6

如果

，这没用

h2-h6元素可能包含标题作为它们的子字符串
title中包含双引号

如果你想要完全匹配，那么你会进一步研究这个。

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

Demo

将文档中的第一个标题标记（<h2>，</h2> <h3> .. </h3> <h6>）更改为</h6> <h1> </h1>

6 个答案: