jQuery更改类名

我想改变td标签的类给定td标签的id:

<td id="td_id" class="change_me"> ...

我希望能够做到这一点，而在一些其他dom对象的点击事件。我如何获取td的id并改变它的类?

843528 次浏览
小开
最佳答案
使用jQuery < p > 你可以通过使用.attr()来< >强组< / >强类(不管它是什么)，像这样:

$("#td_id").attr('class', 'newClass');

如果你想添加一个类，使用.addclass()代替，像这样:

$("#td_id").addClass('newClass');

或者使用.toggleClass()交换类的简单方法:

$("#td_id").toggleClass('change_me newClass');

下面是专门用于class属性的jQuery方法的完整列表。

小开

编辑:

如果你说你正在从嵌套的元素更改它，你根本不需要ID。你可以这样做:

$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');

最初的回答:

$('#td_id').removeClass('change_me').addClass('some_other_class');

另一种选择是:

$('#td_id').toggleClass('change_me some_other_class');
小开

我觉得你要找的是这个

$('#td_id').removeClass('change_me').addClass('new_class');
小开

你可以检查addClass或toggleClass

小开

所以你想改变它当它被点击…让我把整个过程讲一遍。 让我们假设你的“外部DOM对象”是一个输入，就像一个select:

让我们从这个HTML开始:

<body>
<div>
<select id="test">
<option>Bob</option>
<option>Sam</option>
<option>Sue</option>
<option>Jen</option>
</select>
</div>


<table id="theTable">
<tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
<tr><td>Sue</td><td>Jen</td></tr>
</table>
</body>

一些非常基本的CSS:

​#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}

并设置一个jQuery事件:

function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}


$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});

现在，无论何时从选择中选择内容，它都会自动找到具有匹配文本的单元格，允许您颠覆整个基于id的过程。当然，如果您想这样做，您可以轻松地修改脚本，使用id而不是值

.filter("#"+useVal)

并确保适当地添加id。希望这能有所帮助!

小开

我想他是想替换一个类名。

这样做是可行的:

$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});

从http://monstertut.com/2012/06/use-jquery-to-change-css-class/

小开
你可以这样做: <代码> $ (" # td_id ") .removeClass(“Old_class”); $ (" # td_id ") .addClass (New_class); > < /代码 或者你可以这样做

$("#td_id").removeClass('Old_class').addClass('New_class');
小开

如果你已经有了一个类，并且需要在类之间交替，而不是添加一个类，你可以链式切换事件:

$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
小开 
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});


or


$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
小开

这个方法对我很有效

$('#td_id').attr('class','new class');
小开

我最好使用.prop来改变className，它工作得很好:

$(#td_id).prop('className','newClass');

对于这一行代码，你只需要改变newClass的名称，当然还有元素的id，在下一个例子中:idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

顺便说一下，当您想要搜索应用于任何元素的样式时，您只需在页面显示时单击浏览器上的F12，然后在DOM Explorer的选项卡中选择您想要查看的元素。在Styles中，你可以看到你的元素应用了什么样式，以及它是从哪个类读取的。

小开

使用jquery更改类

试试这个

$('#selector_id').attr('class','new class');

您还可以使用此查询设置任何属性

$('#selector_id').attr('Attribute Name','Attribute Value');
小开

下面是使用jQuery的解决方案:

$(document).ready(function(){
if($('#td_id').hasClass('change_me')) {
$('#td_id').removeClass('change_me').addClass('something_else');
}
});

提交答案