基于部分属性查找HTML(Find HTML based on partial attribute)

2019-06-27 14:20发布

有没有用JavaScript(特别是jQuery的)办法找到根据部分属性名称的元素?

我不想找任何发现在这些链接引用的部分属性值选择的:

  • 开头 [名^ =“值”]
  • 包含前缀 [名称| =“值”]
  • 包含 [名称* = “值”]
  • 包含字 [名〜=“值”]
  • 结尾 [名$ =“值”]
  • 等于 [名称=“值”]
  • 不等于 [名字!=“值”]
  • 开头 [名^ =“值”]

但沿线的更多的东西

<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>

$("[^data-api]").doSomething()

发现有以“数据API”开头的属性的元素。

Answer 1:

不知道它是什么,你要寻找的,只是花了几分钟写的:

$.fn.filterData = function(set) {
    var elems=$([]);
    this.each(function(i,e) {
        $.each( $(e).data(), function(j,f) {
            if (j.substring(0, set.length) == set) {
                elems = elems.add($(e));
            }
        });
    });
    return elems;
}

要使用这样的:

$('div').filterData('api').css('color', 'red');

并且将匹配等的数据属性的任何元素data-api-*你可以扩展和修改,以包括更多的选择等等但现在它只能搜索数据属性,只有符合“开头”,但在至少它的简单使用?

小提琴



Answer 2:

这将使用.filter()来限制考生那些具有data-api-*属性。 也许不是最有效的方法,但是使用的,如果你能先缩小与相关选择搜索。

$("div").filter(function() {
    var attrs = this.attributes;
    for (var i = 0; i < attrs.length; i++) {
        if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;       
    };
    return false;
}).css('color', 'red');

演示: http://jsfiddle.net/r3yPZ/2/


这也可以写成一个选择。 这是我的新手尝试:

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) {
    for (var i = 0; i < obj.attributes.length; i++) {
        if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true;
    };
    return false;
};

用法:

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red');

演示: http://jsfiddle.net/SuSpe/3/

这个选择应该适用于预1.8版本的jQuery。 对于1.8及以后, 可能需要一些改变 。 下面是在一个标准的1.8版本的尝试:

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) {
    return function(obj) {
        for (var i = 0; i < obj.attributes.length; i++) {
            if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true;
        };
        return false;
    };
});

演示: http://jsfiddle.net/SuSpe/2/


对于更通用的解决方案,这里有一个选择器,需要一个正则表达式模式并选择具有匹配的模式的属性的元素:

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) {
    var re = new RegExp(regex);
    return function(obj) {
        var attrs = obj.attributes
        for (var i = 0; i < attrs.length; i++) {
            if (re.test(attrs[i].nodeName)) return true;
        };
        return false;
    };
});

对于你的榜样,这样的事情应该工作:

$('div:hasAttr(^data-api-.+$)').css('color', 'red');

演示: http://jsfiddle.net/Jg5qH/1/



文章来源: Find HTML based on partial attribute