jQuery获取具有属性的项目

时间:2014-01-23 20:46:51

标签: javascript jquery html css

让我说我有

<div color-opacity="0.8" color-whatever="something" color-whateverbadinga="something">content</div>

我想要做的是选择具有以color- 开头的属性的每个项目(属性名称,而不是属性值)

所以<div color-dsjdjkdskjsd="something">content</div>也会匹配。

是否可以不迭代每个项目并检查每个属性?

3 个答案:

答案 0 :(得分:2)

jQuery选择器不能过滤属性名称,您应该自己阅读属性的名称,以下是使用.filter()方法和attributes属性过滤元素的方法。 但是,我不推荐,因为它效率很低,而且通常是一种不好的做法。将类名添加到具有此类属性的元素并使用类选择器更有意义:

$('div').filter(function() {
   var a = this.attributes;
   for (var i = 0; i < a.length; i++) {
     if (a[i].nodeName.indexOf('color') === 0)
         return true;
   }
   return false;  
});

答案 1 :(得分:1)

我不知道如何直接从JQuery获得你想要的东西。

根本问题的最简单解决方案是在添加颜色属性时在所有元素上添加一个类(“hasColor”)。这当然是假设您正在生成元素。

答案 2 :(得分:0)

我不建议您创建自己的属性。但是,您可以使用数据属性执行此操作:

  <div data-coloropacity="0.8" data-colorwhatever="something" 
  data-colorwhateverbadinga="something">content</div>

然后创建自己的jquery data2选择器:

 jQuery.expr.pseudos.data2= $.expr.createPseudo(function(arg) {
  var regexp = new RegExp(arg);
   return function(elem) {
    for(var i = 0; i < elem.attributes.length; i++) {
        var attr = elem.attributes[i];
        if(regexp.test(attr.name)) {
            return true;
        }
      }
      return false;
   };
 });

然后你可以像这样使用它:

 console.log($(":data2('color')").html());

<强> DEMO