Question

我选择了以下元素。获取课程名称icon_23123的最佳方法是什么？

<div class="icon icon_23123"></div>

是否有类似[class ^ =“icon_”]的东西来选择属性而不是元素？或者我应该获取所有类名，并循环查找以icon _？

开头的名称

编辑：我想写一个函数，它获取以icon_开头的任何类名，只有那些类名。最终，我想获得下划线之后的部分，但它不一定是数字 - 我的计划是使用正则表达式（这些类名称是常规的。）

EDIT2：我正在尝试从中获取类名的元素已被选中，我只需要它的类名（不是文档中的每个元素都带有class =“icon _.....”）< / p>

EIDT3：我真正的问题是我混合了数据和样式。由于我不关心支持旧浏览器，我使用data-id来保存此数据的id。

<div class="icon icon_23123" data-id="23123"></div>

Answer 1

如果使用类来存储数据，HTML5提供了一种更方便的方法来将数据附加到元素 - data- attributes。例如：

<div class="icon" data-id="23123"></div>

然后你可以直接读取属性（最常见的跨浏览器方式）：

var id = myelement.getAttribute('data-id');

或使用原生dataset属性对象：

var id = myelement.dataset.id;

或者对旧浏览器使用jQuery的data()方法（IE10 - ）：

var id = $(myelement).data('id');

也可以使用相同的data-属性通过.icon[data-id="23123"]等属性选择器将单个样式附加到元素。

Answer 2

使用.attr（）结合.each（）：

$('[class^="icon_"]').each(function () { console.log($(this).attr('class'); });

这将传递所有具有以icon_开头的类名的元素，并将其传递给每个函数。然后，您可以使用.attr访问元素的属性。如果您只需要访问第n个元素，则可以使用$('[class^=icon_]:eq(n)').attr('class')

编辑（回答评论）：

var classes = $(selectedElement).attr('class'),
    iconIndex = classes.indexOf('icon_'),
    iconIndex2 = classes.indexOf(' ', iconIndex),
    theClassName = classes.slice(iconIndex, (iconIndex2 > -1) ? iconIndex2 : undefined)

API文档：each attr

jQuery：从多类元素中获取类名

2 个答案: