Можно ли выбрать элемент только по значению атрибута?

Question

Мне нужно найти все элементы на странице по атрибуту value только (игнорируя ключ) с помощью jquery.

Есть ли способ сделать это легко?

В настоящее время я просто итерацию по всем элементам страницы, на каждой собственности и т.д ..

Answer 1

Вы можете определить новую функцию принимают в качестве параметра значение, которое вы хотите отфильтровать с (например get_elements_by_value(filter)), то в этом функция разбора всех элементов страницы с помощью $('*').each(), после этого разобрать атрибуты каждого элемента el из этих элементов, используя атрибут attributes, как показано ниже:

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

Затем внутри цикла each вы можете сделать свой отелю об n и нажмите согласованные значения с принятым filter внутри matched[], который должен быть возвращен.

Проверьте рабочий пример ниже, надеемся, что это поможет.

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');

<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>

Answer 2

Используйте кронштейны []

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 3

Если вы хотите найти все значения атрибутов вы можете использовать этот небольшой плагин:

$.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

Answer 4

You могут использовать $.expr, Element.attributes, Array.prototype.some()

$.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");

<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>