jquery 改变标签

Question

我的代码不起作用，你能帮我吗？我希望将 class="s7" 的标签名称“p”更改为“h1”

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $(".s7").replaceWith($('<h1>' + $(this).html() + '</h1>');
        });
    </script>

Answer 1

问题是您将所有元素与类 s7 进行匹配，但您需要一一处理它们，以便将其内容复制到新元素中。在当前代码中，this 始终是 document，而不是当前元素。

您可以使用 each() 迭代匹配的元素：

$(".s7").each(function() {
    var $this = $(this);
    $this.replaceWith($("<h1>" + $this.html() + "</h1>"));
});

或者也许：

$(".s7").each(function() {
    $("<h1>" + $(this).html() + "</h1>").replaceAll(this);
});

Answer 2

您缺少右括号，并且在错误的上下文中使用了this：

$(document).ready(function(){
    $(".s7").replaceWith($('<h1>' + $(".s7").html() + '</h1>'));
});

http: //jsfiddle.net/L82PW/

如果您有多个类名为 s7 的元素，请使用 .each()：

$(document).ready(function(){
    $(".s7").each(function(){
        $(this).replaceWith($('<h1>' + $(this).html() + '</h1>'));
    });
});

Answer 3

“replaceWith()”调用中 this 的值不会是“s7”元素；它将是更大的“document.ready”处理程序中的任何this。

要执行您想要的操作，请使用“.each()”：

  $('.s7').each(function() {
    $(this).replaceWith($('<h1>' + $(this).html() + '</h1>'));
  });

在该版本中，jQuery 将为每个具有“s7”类的元素调用“each”函数。此外，在该函数调用中，jQuery 安排 this 在每次迭代中引用这些 DOM 元素之一。

为了进一步阐述差异，请考虑在我的版本和您的版本中，“replaceWith()”的参数都是在调用“.replaceWith()”之前计算的。也就是说，涉及 $(this) 的字符串连接表达式在函数调用之前进行计算。因此，this 无法获取链中任何元素的值； JavaScript 根本就不是这样工作的。

然而，通过“.each()”循环，我们可以确保 this 具有有用的值。请注意，“.each()”还将当前 DOM 元素的引用作为显式参数传递，因此代码也可能类似于：

  $('.s').each(function(index, element) {
    $(element).replaceWith($('<h1>' + $(element).html() + '</h1>'));
  });