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>

我想将名称中包含“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”，当我查看类属性时，新的类名就在那里。然而，当我查看 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/