返回所有属性以某些内容开头的元素

Anthony Accioly 发表于 Dev

安东尼·阿乔利

我知道[name^="value"] 选择器，但是有一个类似的选择器（或技术）可以查询从给定值开始的所有属性吗？

我正在寻找类似的东西$("[*^='http://www.something.com']")（不存在）。

它将匹配包含至少一个属性且其值以开头的所有元素http://www.something.com。

说：

<img src="http://www.something.com/image.jpg" />
<a href="http://www.something.com">Something</a>
<link rel="stylesheet" href="http://www.something.com/css/style.css" type="text/css">

属性名称可以是任何东西，不仅可以是src和href，甚至可以是非标准属性。

有已知的方法吗？

安东尼·阿乔利

我整理了其他答案中的一些想法，并编写了一个自定义选择器。

选择器

$.expr[':'].hasAttrStartingWithValue = function (obj, index, meta) {

    var startsWithAttrValue = false;
    var value = meta[3];

    for (var i = 0; i < obj.attributes.length; i++) {
        var attr = obj.attributes[i];
        // attr.value starts with value
        if (attr.specified && attr.value.lastIndexOf(value, 0) === 0) {
            startsWithAttrValue = true;
            break;
        }
    }

    return startsWithAttrValue;
};

它没有经过正确的交叉浏览和正确性测试，我相信它可以进一步优化，但似乎可以与IE 11，FF 24和Chrome 32一起很好地工作。

用法

// Logs every occurrence of a value in any attribute of the page
$(":hasAttrStartingWithValue('http://www.something.com')").each(function (i, e) {
    console.log(i + " - " + e.outerHTML);
});

// Matches only children of test
$("#test :hasAttrStartingWithValue('http://www.something.com')")
   .css('background-color', 'red');

工作小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。