Question

我的页面上有几个div，包含my_widget-2，my_widget-8等等。可以使用哪些JavaScript或jQuery代码来获取数字“2”（即附加第一个匹配小部件的数字）？

注意：如果我再次写这个问题，我会更改这些类名的顺序，并要求获得“8”的方法，以避免给人的印象是我想要较小的数字。

Answer 1

$( "[class*='my_widget']" ).each ( function () {
    var elClasses = $( this ).attr ( 'class' ).split ( ' ' );

    for ( var index in elClasses ) {
        if ( elClasses[index].match ( /^my_widget-\d+$/ ) ) {
            var classNum = elClasses[index].split ( '-' )[1];
            alert ( classNum );
            break;
        }
    }
} );

使用“attributeContains”选择器获取具有类my_widget-*的所有元素，然后循环遍历元素搜索您的类的所有类。找到后，提取数字部分。

Answer 2

这应该可以解决问题：

$("[class^='my_widget']").each(function() {
    var classParts = $(this).attr('class').split('-');
    var number = classParts.pop();
});

请注意，它仅在有单一课程时才有效，否则您会得到类似8 otherclass的内容。

Answer 3

基本JS方法：

<div id="x" class="widget-2 lang-日本語">foo</div>

function Element_getClassArgument(el, name) {
    var classes= el.className.split(' ');
    var prefix= name+'-';
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)==prefix)
            return classes[i].substring(prefix.length);
    return null;
}

Element_getClassArgument(document.getElementById('x'), 'widget'); // 2

如果要在名称中包含空格字符或连字符，则必须引入某种编码方案，例如encodeURIComponent。但通常你可以在没有它的情况下逃脱。

在名称中包含$的内容留给读者练习。： - ）

Answer 4

如果要使用类my_widget-2获取DIV元素，请使用此选择器：

$("div.my_widget-2")

但是如果你想让所有DIV元素都有一个my_widget-N形式的类，其中 N 是一个任意数字，试试这个：

$("div[class]").each(function() {
    var matches = this.className.match(/(?:^|\s+)my_widget-(\d+)(?:\s+|$)/g);
    if (matches !== null) {
        alert(matches);
    }
})

Answer 5

尝试 element.attr('class').match(/my_widget-(\d+)/)[1]

它应该将列号作为字符串返回，所以只需在其上运行parseInt（）

如何找到一个带有类名的部分的div并获得该类名的剩余部分？

5 个答案: