jsFiddle

Question

我偶然发现了一个棘手的问题，我无法找到任何引用（除了Stackoverflow上的一个引用，在Plain Old Javascript中编写得非常低效 - 我希望它在jQuery中编写）

问题

我需要检索属性名称（注意：不 属性值）以给定开头的所有子元素字符串。

所以，如果我有：

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

我的查询将返回两个元素的集合，这两个元素将是前两个元素的数据前缀 - -prefix

有关如何撰写此查询的任何想法？

我的目标是：

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

但当然这是无效的

希望你们中的一个人更关注如何解决这个问题。

解决方案

（参见下面接受的代码示例）

显然 无法直接查询部分属性名称。你应该做什么（这只是一种可能的解决方案）是

选择您可以
迭代他们
然后为每个元素迭代元素的属性
当您找到匹配时，将其添加到集合
然后离开循环并继续前进到要检查的下一个元素。

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

希望有所帮助：）

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

Answer 2

您可以使用jquerys filter（）方法让函数处理选择元素。在这个功能里面，你可以自由地做任何你想做的事情。

首先选择dom树中的所有元素并过滤掉你不喜欢的所有内容。不是特别快，但工作。

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

2 个答案:

jsFiddle