Question

我不知道是否可能，但我想根据属性名称前缀查找元素。属性如下：

<div attName:someOtherValue="12"> </div>

它不一定必须在div上，但它确实遵循上述模式。

的更新

好的，我忘记了关于我想要实现的目标的两个要点： 1.我不能使用jQuery所以我将只使用本机JS。 2. 2.结肠改变之后的标准所以当我说我需要根据属性前缀找到我不能使用冒号后的部分而只使用结肠前的部分（或包括冒号）

Answer 1

您可以为所有这些元素指定一个公共类：

<div class="yourClass 12"> </div>

然后你可以参考所有：

var x = document.getElementsByClassName("yourClass");

如果你不能修改元素类，使用JQuery你可以创建一个模式：

$("div:regex(class, .yourClass*)")

如果你想＆＃34;模拟＆＃34;在模式中，您可以使用

选择所有元素

var elements = document.getElementsByTagName(*);

迭代元素，您可以使用class

分析attribute或String::indexof()的匹配元素

Answer 2

您可以使用html5数据属性

<div data-theNameYouWant="someValue">xpto</div>

和jQuery

$("*").data("theNameYouWant", function(){
    //do your stuff
});
//in case you want a log of that value
console.log($("*").data("theNameYouWant"));
//this will return a log (in browser console), with all the elements values that contains the attribute "data-theNameYouWant"

Answer 3

您需要使用以下内容将所有元素与您提及的属性

相匹配

$('[attName\\:someOtherValue="12"]')

当您在选择器中:时，您需要使用\\

来转义它

<强> DEMO

纯JavaScript中的相同：

＆＃13;

   var elements = document.querySelectorAll('[attName\\:someOtherValue="12"]');
  for(var i =0; i < elements.length; i++) {
      elements[i].classList.add("spaner");
  }

＆＃13;

.spaner {
  width: 100px;
  height: 100px;
  background: red;
  margin: 50px;
}

＆＃13;

 <div attName:someOtherValue="12"> </div>
 <p attName:someOtherValue="12"> </p>
 <span attName:someOtherValue="12"> hi </span>

＆＃13;

Answer 4

这里的自定义函数获取元素的attributes属性并浏览查找给定子字符串的内容，如果找到则返回具有匹配属性名称和值的对象。

用法：的

var attribute_object = match_attribute(element, key_substring)

示例：的

<div attName:someOtherValue="12"> </div>

<script>

function match_attribute (elem, key) {
    var attributes = elem.attributes
    var obj = {}

    Array.prototype.slice.call(attributes).forEach(function(attribute) {
        if ( -1 !== attribute.name.indexOf(key.toLowerCase()) ) {
            obj = { name: attribute.name, value: attribute.value }
        }
    })
    return obj
}

console.log(match_attribute(document.getElementsByTagName('div')[0], 'attName:'))
// Object {name: "attname:someothervalue", value: "12"}

</script>

JSFiddle

查找包含特定属性前缀的元素

的更新

4 个答案: