Question

我需要使用jquery仅按属性value查找页面中的所有元素（忽略键）。

有没有办法轻松完成这项工作？

目前，我只是迭代页面中的所有元素，每个属性等。

Answer 1

您可以使用$.expr，Element.attributes，Array.prototype.some()

＆＃13;

$.expr[":"].attrValue = function(el, idx, selector) {
  return [].some.call(el.attributes, function(attr) {
    return attr.value === selector[selector.length - 1]
  })
};
// filter element having attribute with `value` set to `"abc"`
$(":attrValue(abc)").css("color", "blue");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div title="abc">abc</div>
<div title="def">def</div>
<div title="ghi">ghi</div>
<div title="jkl">jkl</div>

＆＃13;

Answer 2

您可以将新函数定义为要过滤的值的参数（例如get_elements_by_value(filter)），然后在此函数内部使用$('*').each()解析页面的所有元素，之后解析属性这些元素的每个元素el使用属性attributes，如下所示：

$.each(el.attributes, function(){ })

然后在each循环内部，您可以创建条件，并将匹配的值推送到应返回的filter内matched[]。

检查下面的工作示例，希望这有帮助。

＆＃13;

function get_elements_by_value(filter){
  var matched=[];

  $('*').each(function(index,el) {
    $.each(el.attributes, function() {
      if( this.value===filter )
        matched.push(el);
    })
  })
  return $(matched);
}

get_elements_by_value('my_value').css('background-color','green');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="my_value">AA</div>
<div title="def">BB</div>
<input type='text' name='my_value' value='CC'/>
<p class='my_value'>DD</p>
<span title="test">EE</span>

＆＃13;

Answer 3

使用方括号[]

var ElementsWithAttributeKeyTest = $('[attributeKey="Test"]');

或者将具有属性名称和值作为参数的对象传递给此函数：

var getElemsByAttribute = function(obj) {
  if (obj) {
    if (obj.attributeKey && obj.attributeValue) {
      return $('[' + obj.attributeKey + '="' + obj.attributeValue + '"]');
    }
  }
}

var attrObj = {
  attributeKey: 'data-color',
  attributeValue: 'red'
}
getElemsByAttribute(attrObj).css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<span data-color="red">Red</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>
<span data-color="blue">Blue</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>

Answer 4

如果要搜索所有属性值，可以使用这个小插件：

$.fn.search_by_attr_value = function(regex) {
    return this.filter(function() {
        var found = false;
        $.each(this.attributes, function() {
            if (this.specified && this.value.match(regex)) {
                found = true;
                return false;
            }
       });
       return found;  
    });
};

你可以像这样使用它：

$('*').search_by_attr_value(/^some value$/);

基于this answer

是否可以仅按属性值选择元素？

4 个答案: