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函数和允许的参数的文档：

可以是HTML字符串，DOM元素，DOM元素数组或jQuery对象。

您正在传递数组和对象的混合体。即使您要传递数组，它也必须是DOM元素数组，而不是像您当前正在执行的元数据。

我选择查找所有目标DOM元素，并一步一步地遍历它们。

这是为您工作的小提琴： https://jsfiddle.net/2jkqh34n/

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

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>

Answer 2

JavaScript中的对象必须包含键值对。在您的情况下，您有以下对象：

{
    "class",              // Not a key-value pair.
    this.className,       // Not a key-value pair.
    html: $(this).html(); // Is a key-value pair, but should not have a semi-colon.
}

要修复它，您将需要执行以下操作：

{
    class: this.className,
    html: $(this).html()
}

这些更改可能与您所寻找的完全不同，但总体思路保持不变。

Answer 3

尝试一下。此代码不应重新创建任何h3子元素。这意味着，如果您有任何事件或jQuery数据绑定到这些子元素，它们仍将起作用。

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

Answer 4

您正在创建一个JavaScript对象，该对象应该具有键值对的组合。这些键值对需要用冒号（:)分隔

所以代码看起来像这样：

$("<h2>", { "class" : this.className,
        html: $(this).html()
      });

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

4 个答案:

HTML

JS

这会屈服的