我有一个包含许多div的div。所有这些细分都有许多与特定命名模式匹配的类。我有很多名为“tile1Full”,“tile1Thumb”,“BG1Full”,“BG1Thumb”的课程。所以我的HTML可能看起来像这样:
<div id=parent>
<div>
<div class='tile1Full BG2Full border1'>
</div>
<div>
<div class='tile3ContainerFull border1'>
<div class=tile2x2Full border3></div>
</div>
</div>
我想将名称中“Full”的所有类替换为“Thumb”对应的类,因此结果如下:
<div id=parent>
<div>
<div class='tile1Thumb BG2Thumb border1'>
</div>
<div>
<div class='tile3ContainerThumb border1'>
<div class=tile2x2Thumb border3></div>
</div>
</div>
以下是我提出的建议:
contents.find('div').each(function (i) {
if ($(this).attr('class')!==undefined)
{
$(this).attr('class',$(this).attr('class').replace(/Full/g,'Thumb'));
}
});
问题是,根据Firefox“Inspect Element”,当我查看class属性时,新的类名就在那里。但是,当我查看CSS检查器时,实际上并未应用这些类。它不再按预期应用“完整”类,但它也不适用“Thumb”类。
该类所做的一件事是设置div的宽度和高度。 div本身不包含任何内容;只是背景图像,所以由于没有应用新类,它们的宽度和高度均为0,实际上消失了。
为什么属性检查器会报告它们具有所需的类,但CSS检查器是否显示这些类未应用?
由于
答案 0 :(得分:5)
你可以这样做
$(document.body).find('div').each(function (i) {
var c = $(this).attr('class');
if(c !== undefined){
c = c.replace(/Full/g,'Thumb')
$(this).removeClass().addClass(c);
}
});
答案 1 :(得分:2)
我认为你可以大量使用.attr(attr, fn)的这一部分来解决问题。我没有机会测试它,设置一个小提琴,我会让它工作,但尝试:
contents.find('div').attr("class", function (idx, cls) {
if(/Full/.test(cls) {
return cls.replace(/Full/g, 'Thumb');
}
});
快速测试:
var $a = $("<div>", {"class": "test bgFull yo test2"});
$a.attr("class", function (idx, cls) {
return cls.replace(/Full/g, 'Thumb');
});
$a.attr("class"); // 'test bgThumb yo test2'
答案 2 :(得分:0)
这有点内部传播方法的一些问题在这里出错...... 你尝试过使用jQuery函数addClass()和removeClass()吗?这样看起来会更加清晰。
干杯,
弗洛里安