如何更改由 class 名称选择的所有 html 元素的标签名称？动态地

Question

强文本

 .my-p{ display: inline; }.my-div {}.my-bold{ font-weight: 900; }

 <!DOCTYPE html> <html> <head> </head> <body> <div> <p class="my-p">This is <div class="my-div"><span class="my-bold">First</span></div> line</p> <p class="my-p">This is <div class="my-div"><span class="my-bold">Second</span></div> line</p> <p class="my-p">This is <div class="my-div"><span class="my-bold">third</span></div> line</p> <p class="my-p">This is <div class="my-div"><span class="my-bold">Fourth</span></div> line</p> <p class="my-p">This is <div class="my-div"><span class="my-bold">Fifth</span></div> line</p> <p class="my-p">This is <div class="my-div"><span class="my-bold">six</span></span></div> line</p> <p class="my-p">This is <div class="my-div"><span class="my-bold">seven</span></div> line</p> </div> </body> </html>

我如何通过类名"my-div" select 所有<div>元素，并将元素的标签名称更改为span 。

我正在尝试从一个网站的许多页面复制文本，它在p元素之间有所有这些div ，当粘贴它时很难以可读的方式复制它是在多行中粘贴，凡是文本是粗体的地方都有一个div在div中有一个span元素，在该span元素中有文本， div 具有相同的 class名称，所以我正在寻找一种方法来 select 具有相同 class 名称的所有 div 元素，并将其中的标签名称更改为 span

所需的 output：

目前Output：

我尝试使用 jQuery $$(.className) 对所有 div 元素进行 select，它给出了所有元素的列表，之后我手动选择并将 div 更改为 span 然后复制，与它的出现方式相同

但是当我使用 CSS 内联时它没有工作属性

示例网站视图

 <body> <p class="p-tag"> Lorem ipsum <div class="div-tag"> <span class="span-tag">dolor</span> </div> sit amet consectetur adipisicing elit. Maxime <div class="div-tag"> <span class="span-tag">mollitia</span> </div>, </p> <p class="p-tag" > <b class="b-tag" >Lorem ipsum</b> <div class="div-tag"> <span class="span-tag">sit amet consectetur adipisicing elit.</span> </div> </p> </body>

复制时

Answer 1

我们可以使用display:inline; 或display:inline-block; 在任何块级元素上，使其出现在一行中。

根据您想要的 output：您可以简单地使用以下 CSS：

.my-div,
.my-p {
  display:inline;
}

Answer 2

我在这里找到了答案表

jQuery/javascript 替换标签类型

首先，我用它在 head 标签中添加脚本，或者您可以手动添加脚本

const link = document.createElement('script');
link.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js");

const newHead = document.getElementsByTagName('head')[0];
newHead.insertBefore(link, newHead.firstChild);

或在头部手动添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后

(function($) {
    $.fn.replaceTagName = function(replaceWith) {
        var tags = [],
            i    = this.length;
        while (i--) {
            var newElement = document.createElement(replaceWith),
                thisi      = this[i],
                thisia     = thisi.attributes;
            for (var a = thisia.length - 1; a >= 0; a--) {
                var attrib = thisia[a];
                newElement.setAttribute(attrib.name, attrib.value);
            };
            newElement.innerHTML = thisi.innerHTML;
            $(thisi).after(newElement).remove();
            tags[i] = newElement;
        }
        return $(tags);
    };
})(window.jQuery);

然后

$('.my-div').replaceTagName('span');

如何更改由 class 名称选择的所有 html 元素的标签名称？动态地

问题描述

所需的 output：

目前Output：

2 个解决方案

解决方案1
2 2022-04-30 20:39:51

解决方案2
0 已采纳 2022-05-07 12:02:04

如何更改由 class 名称选择的所有 html 元素的标签名称？ 动态地

问题描述

所需的 output：

目前Output：

2 个解决方案

解决方案1 2 2022-04-30 20:39:51

解决方案2 0 已采纳 2022-05-07 12:02:04

如何更改由 class 名称选择的所有 html 元素的标签名称？动态地

解决方案1
2 2022-04-30 20:39:51

解决方案2
0 已采纳 2022-05-07 12:02:04