jQuery用不同的类替换某个元素的特定模式的所有类

Question

我有一个包含许多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>

我想用名称"Thumb"替换名称中"Full"的所有类,结果如下:

<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检查器时,实际上并未应用这些类.它不再像预期的那样应用"Full"类,但它也不适用"Thumb"类.

该类所做的一件事是设置div的宽度和高度.div本身不包含任何内容; 只是背景图像,所以由于没有应用新类,它们的宽度和高度均为0,实际上消失了.

为什么属性检查器会报告它们具有所需的类,但CSS检查器是否显示这些类未应用？

谢谢

Answer 1

你可以这样做

$(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);
    }
});

看到这里 http://jsfiddle.net/95tQA/1/