javascript - 获取 DOM 中属性名称以 some-string 开头的所有 HTML 元素

Question

我偶然发现了一个棘手的问题，我找不到任何引用资料(除了 Stackoverflow 上的一个，它是用 Plain Old Javascript 编写的，效率很低——我希望它是用 jQuery 编写的) .

问题

我需要检索所有attribute-name(注意:不是 attribute-value)以给定开头的子元素字符串。

如果我有:

<a data-prefix-age="22">22</a>
<a data-prefix-weight="82">82</a>
<a href="#">meh</a>

我的查询将返回两个元素的集合，这将是前两个具有 data-prefix--prefix

关于如何编写此查询有任何想法吗？

我想要的是:

$(document).find("[data-prefix-*]")

但这当然是无效的

希望你们中的一个人对如何解决这个问题有更敏锐的眼光。

解决方案

(请参阅下面接受的代码示例)

显然没有直接查询部分属性名称的方法。您应该做的(这只是一种可能的解决方案)是

1. 尽可能选择最小的元素集合
2. 遍历它们
3. 然后为每个元素迭代元素的属性
4. 找到匹配项后，将其添加到集合中
5. 然后离开循环并移动到下一个要检查的元素。

您最终应该得到一个包含您需要的元素的数组。

希望对您有所帮助:)

Answer 1

也许这会成功 -

    // retrieve all elements within the `#form_id` container
    var $formElements = $("form#form_id > *");

    var selectedElements = [];
    // iterate over each element
    $formElements.each(function(index,elem){
        // store the JavaScript "attributes" property
        var elementAttr = $(this)[0].attributes;
        // iterate over each attribute
        $(elementAttr).each(function(attIndex,attr){
            // check the "nodeName" for the data prefix
            if (attr.nodeName.search('data-.*') !== -1){
               // we have found a matching element!
               if (selectedElements.length < 2){
                 selectedElements.push(elem);
                 break;
               }else{
                 if (selectedElements.length == 2){
                   break(2);
                 }
               }
            }
        });
    });

selectedElements 现在将包含前两个匹配元素。

jsFiddle