Question

我有以下内容：

<div id="unique" class="myclass xyz_345">...</div>

问题：我如何访问＃{1}}之后的＃，因为我已经应用了2个css类？（在上面的例子中，它将是数字345）。

我尝试了以下内容，但确实有效：

xyz_

Answer 1

我很确定

var myString = $("#unique").attr("class")

将返回“abc xyz_345”。那么你可以在空间上分割该字符串：

var mySplitResult = myString.split(" ");

并遍历生成的数组，查找以“xyz_”开头的内容 - 然后获取该元素的子字符串。

var s;
for (s in mySplitResult){
     if(s.substring(0,4) == "xyz_"){
          var numberAfterXYZ = s.substring(4);
     }
}

Answer 2

var num_after_xyz = $('#unique').attr("class").match(/^.*_(\d+).*/);
alert(num_after_xyz[1]);

这个正则表达式应该有用。

它查找任何内容，后跟_和一些数字，后跟任何内容。

Answer 3

尝试以下几点：

jQuery.fn.getClassNumber = function(classPrefix){
    var classes = this.attr('class').split(" ");
    jQuery.each(classes, function(i){
        if (classes[i].substring(0,classPrefix.length-1)==classPrefix){
            return classes[i].substring(classPrefix.length-1);
            }
        });
    return false;
    }

然后获取类前缀后面的数字：

$('element').getClassNumber('xyz_');

我认为这会有效，但我没有测试过，试一试！

Answer 4

让我们为此制作一个小插件：

//
// ReplaceClass
//
// @param   regexp|substr       The old classname you are looking for
// @param   newSubStr|function  The new classname
// @see     https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace
// @depends jQuery
// @author  @abernier
//
(function($) {
    $.fn.replaceClass = function(oldClass, newClass){
        return this.each(function(i, el){
            $(el).attr('class', function(index, attr){
                return attr.replace(oldClass, newClass);
            });
        });
    };
})(jQuery);

例如：

$('<div class="foo bar"></div>').replaceClass('foo', 'bar');
# => [div.bar.bar]

或使用regexp：

$('<div class="foo-25 bar"></div>').replaceClass(/foo-[0-9]{2}/, 'foo-100');
# => [div.foo-100.bar]

JQuery：如何使用.attr（）访问多个css类？

4 个答案: