Найти HTML на основе частичного атрибута

Есть ли способ с javascript (особенно jQuery), чтобы найти элемент, основанный на имени частичного атрибута?

Я не ищу ни одного из селекторов, которые находят частичные значения атрибутов, как указано в этих ссылках:

начинается с [name ^ = "value" ]
содержит префикс [имя | = "значение" ]
contains [name * = "value" ]
содержит слово [name ~ = "value" ]
заканчивается на [name $= "value" ]
equals [name= "value" ]
не равно [name != "value" ]
начинается с [name ^ = "value" ]

но больше что-то вроде строк

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

и

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

чтобы найти любой элемент, который имеет атрибут, начинающийся с "data-api".

Ответ 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-*, и вы можете расширять и изменять его, чтобы включить больше параметров и т.д., но прямо сейчас он ищет только атрибуты данных и только соответствует "начинается с", но по крайней мере, он прост в использовании?

FIDDLE

Ответ 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/

Этот селектор должен работать для версий jQuery до 1.8. Для 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/