3

我偶然发现了一个棘手的问题，我无法找到任何引用（除了 Stackoverflow 上的一个，它是用普通的旧 Javascript 编写的效率很低 - 我希望它用 jQuery 编写）。

问题

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

所以如果我有：

<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. 然后离开循环并移动到下一个要检查的元素。

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

希望能帮助到你 ：）

4

2 回答 2

2

也许这会奏效-

    // 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

于 2012-07-26T22:49:12.737 回答
0

您可以使用 jquerys filter() 方法让函数处理选择元素。在该功能中，您可以自由地做任何您想做的事情。

所以从选择dom 树中的所有元素开始，过滤掉你不喜欢的所有元素。不是特别快，但工作。

于 2012-07-26T22:47:32.097 回答