创建属性值数组，其中属性名称以特定字符串结尾

Posted 2023-05-09

【中文标题】创建属性值数组，其中属性名称以特定字符串结尾

【英文标题】：Create array of attribute values where attribute name ends with certain string

【发布时间】：2015-05-22 10:30:27

【问题描述】：

我正在尝试创建一个元素属性值数组，其中属性名称以字符串“toselect”结尾。我在页面上有很多这些元素，但我只想要我单击的元素的值。我不知道 jquery .attr() 函数是否接受任何通配符。我正在使用 jquery，但我也会对纯 javascript anwser 感到满意

我知道这不起作用，但我需要类似的东西。

var attrs[] = $(this).attr('*toselect');

html 是这样的

<div class="someclass" data-firsttoselect="somevalue1" data-secondtoselect="somevalue2" data-thirdtoselect="somevalue3"></div>

所以数组'attrs'应该包含somevalue1, somevalue2, somevalue3

【问题讨论】：

您可能应该使用data-* 属性，而不是您自己编造的无效属性？

仅供参考，HTML 无效。您不能向元素添加非标准属性。尝试改用data-* 属性。

我会这样做，但我仍然不知道如何选择它们

没有基于部分属性名称选择元素的内置方法，您必须迭代和过滤

【参考方案1】：

首先，该 HTML 无效。您不能在不使页面无效的情况下向元素添加非标准属性，这可能会导致 UI 和 JS 问题。尝试改用data-* 属性：

<div class="someclass" data-firsttoselect="somevalue1" data-secondtoselect="somevalue2" data-thirdtoselect="somevalue3"></div>

从那里您可以使用map() 创建一个*toselect 值的数组，并根据正则表达式测试该值，如下所示：

var data = $('.someclass').data();
var values = $.map(data, function(value, key) 
    if (/toselect$/i.test(key))
        return value;
);

Example fiddle

【讨论】：

然而 Angular 完全依赖于非标准属性？

@Alnitak 确实如此。大多数渲染器都很宽松，会让你放弃它，但 HTML 仍然无效。这是一个关于这个主题的问题：***.com/questions/18665303/…

在data- 属性之前，多年来使用非标准属性已经很普遍了。浏览器不会废话，只是忽略