javascript - 如何使用 jQuery/JavaScript 仅在特定页面上将 h3 更改为 h2

Question

我遇到了一个客户端问题，他们想将几个页面上的 h3 更新为 h2，而数据来自另一个来源。所以我要做的是将服务和资源页面上的 h3 更改为 h2s。现在我有以下哪种但不是真的有效:

<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("services") > -1) {
       $('.u-label h3').replaceWith(function () {
          return $("<h2>", {
            "class",
            this.className,
            html: $(this).html();
          });
        });;
        }
      });
</script>

我认为理论上它应该有效，但课后我在逗号上得到了意想不到的标记。我什至接近这个吗？是否有更好/更清洁的方法将 h3 转换为 h2？

Answer 1

这在使用 replaceWith 时应该会产生相同的结果功能有点不同。

我也不确定您传递的数据是否有效。如果您从 jQuery(上面的链接)中阅读有关 replaceWith 函数和允许的参数的文档:

May be an HTML string, DOM element, array of DOM elements, or jQuery object.

您传递的是数组和对象的混合体。即使您要传递一个数组，它也需要是一个 DOM 元素数组，而不是像您当前正在做的那样是元数据。

---

我选择找到所有目标 DOM 元素并逐个遍历它们。

这是适合您的工作 fiddle : https://jsfiddle.net/2jkqh34n/

您还可以在遍历所有当前 DOM 元素数据时访问它们。我在代码中提供了示例，但没有提供 fiddle 。

HTML

<div class="scope">
    <div class="change-these">
        <h2 class="sm">foo</h2>
        <h2 class="md">bar</h2>
        <h2 class="lg">baz</h2>
    </div>

    <div class="omit-these">
        <h2>foo</h2>
        <h2>bar</h2>
        <h2>baz</h2>
    </div>
</div>

JS

$(document).ready(function () {
    $('.scope .change-these h2').each(function (i, el) {
        var c = $(el).attr("class");
        $(el).replaceWith('<h3 class="'+ c +'">' + $(el).html() +'</h3>')
    });
});

这会产生

<div class="scope">
    <div class="change-these">
        <h3 class="sm">foo</h3>
        <h3 class="md">bar</h3>
        <h3 class="lg">baz</h3>
    </div>

    <div class="omit-these">
        <h2>foo</h2>
        <h2>bar</h2>
        <h2>baz</h2>
    </div>
</div>