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 以及我能为您的问题想到的所有其他变体进行了测试。以下 1 行简单的 jQuery 每次都会完成这项工作，除非有多个“标题”标签，在这种情况下，只需将 .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

你在寻找这样的东西吗？

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 回答
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 
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 回答
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 回答