将 <div> 更改为 <a> 并使用 Jquery 添加属性/类答案

【问题标题】：Change <div> to <a> and add attributes/class using Jquery将 <div> 更改为 <a> 并使用 Jquery 添加属性/类
【发布时间】：2014-03-18 13:33:07
【问题描述】：

我有一个我试图实现但没有成功的例子。

jQuery:

$('#change').click(function() {
var $planHeaders = $('.plan > div > div:first-child');
$planHeaders.replaceWith($('<a>' + 'homeboy' + '</a>')).attr("href",     "javascript:void(0);").addClass('tile');
$('.plan > div > div:last-child').hide();
});

关于 JsFiddle 的示例：http://jsfiddle.net/95YCr/1/

基本上我想要做的是一旦达到移动/平板电脑大小，将标题更改为标签并删除 .plan div 中的按钮。

此示例没有响应式，我只是将其用作测试版本，#change 链接用作我的“响应式视图激活”。

我注意到 href 属性或类都没有添加到所需的标签中。

我做错了什么？

【问题讨论】：

我认为replaceWith 返回的是被替换的元素，而不是新的元素。
只是提示，您应该尽可能避免使用$(this).parent().parent().parent().parent().parent().toggleClass('open'); 之类的东西，使用.closest() 或.parents()。
您将属性添加到$planHeaders，而不是新的<a> 标记。 attr/addclass 调用应该在replaceWith() 调用内部，很可能。
谢谢！这就是问题所在。问题解决了！

标签： jquery attr replacewith

【解决方案1】：

在您的情况下，您指的是元素 $planHeaders，而不是您正在创建的新锚点。

replaceWith 方法：

将匹配元素集中的每个元素替换为提供的新内容并返回已删除的元素集。

所以将属性添加到replaceWith 方法调用内的锚元素。

代码：

$planHeaders.replaceWith($('<a>homeboy</a>').attr("href", "javascript:void(0);").addClass('tile'));

演示：http://jsfiddle.net/ss7F4/

【讨论】：

【解决方案2】：

我会这样做来创建链接，它在 jquery 中的语法更简洁，应该可以解决你的问题

$('<a>', { className: 'title', href: 'javascript:void(0);'} ).append('homeboy');

这里有一个例子http://jsfiddle.net/domjgreen/K65w4/

【讨论】：

【解决方案3】：

移动

.attr("href", "javascript:void(0);").addClass('tile')

执行反对

$('<a>' + 'homeboy' + '</a>')

这样一行就变成了

$planHeaders.replaceWith($('<a>' + 'homeboy' + '</a>').attr("href", "javascript:void(0);").addClass('tile'));

原因是您将属性和类添加到您刚刚替换的元素，而不是您替换它的元素。

Fiddle

【讨论】：