Select 带通配符的自定义值

Question

在此 fiddle 中，我试图 select 属性值。所以 elems var 应该包含值 listen,submitClicked & listen,textEntered

http://jsfiddle.net/adrianfiddleuser/g2Rxc/128/

来源：

<input tag="listen,submitClicked" id="click" type="submit" value="click"/>
<input tag="listen,textEntered" id="test" type="textbox" value="test"/>

var elems = $('p[^listen]')

console.log(elems)

但通配符似乎不起作用。如何 select 以 "listen" 开头的自定义值并将这些值添加到数组中？

Answer 1

您没有正确使用 ^= 属性选择器。您需要指定 tag 属性：

p[tag^=listen]

[att^=val]

Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

– W3C's Selectors Level 3

此外，tag 不是有效的 HTML 属性，您可能需要考虑改用 a data-* attribute。

Answer 2

正如@JamesDonnelly 正确指出的那样，tag 属性实际上是无效的（尽管它会起作用）。此外，一旦开始扩展 js，在属性值中使用逗号分隔值会使事情变得更难。

根据我从您的示例中了解到的情况，我认为将您的 HTML 结构化如下：

<input data-listen="submitClicked" id="click" type="submit" value="click"/>
<input data-listen="textEntered" id="test" type="textbox" value="test"/>

选择所有 "listen" 的元素就像：

$('[data-listen]');

检查监听特定内容的元素或找出每个元素监听的内容也会容易得多，而无需解析您的 tag 属性中的字符串。

$('[data-listen]').each(function() {
    console.log('I listen for ' + $(this).data('listen'));
});
var $listensForSubmit = $('[data-listen="submitClicked"]');

Select 带通配符的自定义值

Select custom values with wildcard

javascript

jquery

jquery-selectors

`[att^=val]`