在DOM中获取所有属性名以某个字符串开头的HTML元素

Question

我是一名乐于助人的翻译，以下是涉及到IT技术的内容。请注意保留HTML标签，同时简化内容以便更好地理解。

问题

我遇到了一个棘手的问题，除了Stackoverflow上一个使用普通的Javascript编写效率非常低下的代码之外，我没有找到其他任何参考资料。我希望这个问题能够用jQuery来解决。

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

假设我有以下代码：

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

我的查询将返回一个包含两个元素的集合，这两个元素都具有data-prefix-前缀。

你有什么想法来编写这个查询吗？

我想写出类似于以下的内容：

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

当然，这是无效的。

希望你们中有人能更准确地解决这个问题。

解决方案

(见下面接受的代码示例)

显然，没有直接查询部分属性名称的方法。 相反（这只是一种可能的解决方案），您应该执行以下操作：

1. 选择可能的最小元素集合
2. 遍历它们
3. 对于每个元素，迭代该元素的属性
4. 找到结果后，将其添加到集合中
5. 然后退出循环，进入要检查的下一个元素。

您应该得到包含所需元素的数组。

希望能帮到你 :)

- user191152

---

你找到了什么解决方案？ - Felix Kling

这个问题：https://dev59.com/fmPVa4cB1Zd3GeqP2hpM - 我尝试了jQuery的例子，但是我没有得到正确的结果。我还发现了https://dev59.com/2Gkw5IYBdhLWcg3w8fBJ，我正在测试它。 - user191152

在http://api.jquery.com/category/selectors/中，我找不到适合find()函数的选择器。您可以递归地枚举每个子元素的所有属性，并选择匹配的属性并返回吗？ - Diego D

使用“纯粹的旧版JavaScript”解决方案没有任何问题。 - sachleen

@sachleen：我并不反对 - 只是在可能的情况下，我更喜欢遵循jQuery的范例。通常因为我会得到更少的惊喜、更干净的代码和更好的性能 :-) - user191152

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

- Lix

---

如果我再次运行这个程序，所有<form>标签中的元素会是什么样子？你能重构一下代码来展示吗？ - user191152

到目前为止，我已经能够获取我所需要的元素，因此这似乎非常接近我想要的。非常感谢！ - user191152

对于以上代码的一个小修复，你应该这样做：如果（attr.nodeName.search('data-.*') !== -1），那么应该加上以下内容：selectedElements.push(elem); return false;在查找并压入之后退出".each"循环。 - user191152

确实 - @cod 非常有见地! 我会进行编辑 - 谢谢! - Lix

Answer 2

你可以使用jQuery的filter()方法，通过一个函数来处理选择的元素。在该函数内部，你可以自由地进行任何操作。

因此，首先选择dom树中的所有元素，然后过滤掉你不喜欢的内容。虽然不是特别快，但是能够正常工作。

- arkascha