javascript - 是否可以使用 jQuery 将当前元素从 div 更改为标签？

Question

<div class="item" onclick="location.href='a1.html'"></div>
<div class="item" onclick="location.href='a2.html'"></div>
<div class="item" onclick="location.href='a3.html'"></div>
<div class="item" onclick="location.href='a4.html'"></div>
<div class="item" onclick="location.href='a5.html'"></div>

$('.item').each(function() {
    $(this)[0].replace('div', 'a')
})

是否可以将所有div标签更改为a标签？我已经尝试了上面的代码，但没有工作，有什么想法吗？

谢谢

Answer 1

尝试

$('.item').each(function(){
    var $this = $(this);
    var onclick = $this.attr('onclick');
    var match = onclick.match(/(location.href=')(.*)(')/);
    $this.replaceWith($('<a/>', {href : match[2], html: this.innerHTML}))
})

演示：小提琴

Answer 2

也拍了一张：

$('.item').each(function() {
    $(this).replaceWith(
        $('<a>', {
            href: /'(.+)'/.exec($(this).attr('onclick'))[1],
            append: $(this).contents()
        })
    );
});

演示

解释：

• 创建一个锚元素（<a>）；
  • 将其设置为 div属性href中单引号之间的文本；onclick
  • 将所有内容（后代元素和文本节点）从 div 移动到锚元素，这样可以保留它们附加的事件处理程序。
• 用创建的锚元素替换 div。

含义：任何直接绑定到div先前（例如通过.on()或addEventListener）的处理程序仍将被丢弃。

Answer 3

请参阅此链接。对于您的示例，您将执行以下操作：

$('.item').each(function() {
    $(this).replaceWith($('<a>' + this.innerHTML + '</a>'));
})

Answer 4

尝试：

<div class="item" onclick="location.href='a1.html'"></div>
<div class="item" onclick="location.href='a2.html'"></div>
<div class="item" onclick="location.href='a3.html'"></div>
<div class="item" onclick="location.href='a4.html'"></div>
<div class="item" onclick="location.href='a5.html'"></div>

$('.item').each(function(){
    var onClick = $(this).attr('onclick');
    $(this).replaceWith('<a class="item" onclick="'+onClick+'"></a>');
});