Question

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

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属性或类都没有添加到所需的标记中。

我做错了什么？

Answer 1

移动

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

执行

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

这条线变为

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

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

Fiddle

Answer 2

我会这样做是为了在jquery中创建一个更整洁的语法链接，并且应该解决你的问题

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

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

Answer 3

在你的情况下，你引用元素$planHeaders而不是你正在创建的新锚。

replaceWith方法：

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

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

代码：

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

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

将<div>更改为<a> and add attributes/class using Jquery</a> </div>

3 个答案: