使用 jQuery 查找元素的动态类名答案

【问题标题】：Find dynamic classname of element with jQuery使用 jQuery 查找元素的动态类名
【发布时间】：2009-11-04 03:22:09
【问题描述】：

我有未知数量的这样的元素：

<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>

我想做的是检查每个项目是否有一个以“item-”开头的类名。如果为真，则提取 id。像这样的：

$("container").each(function
    if ($(this).hasClassNameStartingWith("item-"))
        console.debug(theId);
);

这怎么可能？

提前致谢！

【问题讨论】：

标签： jquery-selectors

【解决方案1】：

在类属性上使用包含选择器：

$('container[class*=" item-"]').each( function() {
    var classID = null;
    var classes = $(this).attr('class').split( ' ' );
    for (var i = 0, len < classes.length; i < len; ++i) {
        var class = classes[i];
        if (class.match( /^item-/ )) {
            classID = class.replace("item-",'');
            break;
        }
    }
    if (classID) {
        ... do something ...
    }
});

根据您的示例标记，请注意使用引号来包含空格。如果“item-N”类可能出现在列表的开头，并且您确定没有任何类会意外匹配该字符串，您也可以省略空格。

更新示例以展示如何提取类名的标识符部分。

【讨论】：

是的！我怎么没想到。但是我如何获得 ID？
David：“item-N”类中的 id。
遍历类并找到与模式匹配的类。通过删除前导“item-”来提取数字。我会更新的。

【解决方案2】：

您可以对子元素的class 属性执行正则表达式匹配：

var itemIDRe = /(?:^|[ \t\n\r\f\u200b]+)item-([^ \t\n\r\f\u200b]+)/;

$('#container').children().each(function() {
  var match = itemIDRe.exec($(this).attr('class'));
  var itemID = match ? match[1] : null;

  // Do something with itemID.
});

正则表达式基于class attribute 和white space 的HTML 4 定义。

【讨论】：