Selektor JQuery za pomocą wartości, ale nieznany atrybut

Question

Jak mogę użyć JQuery do wyszukiwania elementów, które mają określoną wartość atrybutu, niezależnie od znacznika atrybutu?

odczuwalna:

$("[*='myvalue']") 

powinien znaleźć

<a href="target.html" target="myvalue">... 
<tr change="myvalue">... 

Pierwszy z nich, ze względu na atrybut "target", drugi dla atrybutu "zmiana".

Czy istnieje lepsze rozwiązanie niż tylko powtarzanie wszystkich atrybutów?

Answer 1

Możesz użyć niestandardowego pseudo-selektora do filtrowania atrybutów.

Poniżej przedstawiono sposób jQuery.

$.expr[":"].attrFilter = function(elem, index, val){ 
    var len = $(elem.attributes).filter(function() { 
     return this.value === val[3]; 
    }).length; 
    if (len > 0) { 
     return elem; 
    } 
}; 
$('body *:attrFilter("value")').hide(); 

Fiddle Demo

$.expr[":"].attrFilter, jest mechanizm rozszerzeń dla niestandardowych selektorów. Możesz także przekazać parametr.

---

Składnia:

$.expr[':'].selector = function(elem, index, match) { 

} 

• elem jest obecny elementu DOM
• index jest indeksem elem

• match jest tablica, która zawiera wszystkie informacje dotyczące zwyczajów selektor, gdzie przekazany parametr leży na trzecim indeksie. (Reference 1, Reference 2)

  • match[0] - zawiera pełną pseudo klasy połączenia wybieraka. W tym przykładzie: attrFilter("value")
  • match[1] - zawiera tylko nazwę selektora. W tym przykładzie attrFilter
  • match[2] - oznacza, który, jeśli w ogóle, rodzaj cytatów jest używany w parametrze - wyrażenie. tj. pojedynczy (') lub podwójny ("). W tym przykładzie będzie puste.
  • match[3] - podaje nam parametry, tj. Zawarte w nawiasach. W tym przykładzie `wartości

Answer 2

Tak samo podejście zostanie zastosowane tutaj również. Reference

var elements = document.getElementsByTagName("*"); 
for (var i = 0; i < elements.length; i++) { 
var element = elements[i]; 
var attr = element.attributes; 
for (var j = 0; j < attr.length; j++) { 
    if (attr[j].nodeValue == 'myvalue') { 
     element.style.backgroundColor = 'red'; 
    } 
    } 
} 

Answer 3

Oto rozszerzenie funkcji, które można użyć, aby znaleźć elementy, które chcesz.

jQuery(function($) { 
 
    $.fn.filter_by_attr_value = function(value) { 
 
    return this.filter(function() { 
 
     // [].some() would be better here 
 
     return $.grep(this.attributes, function(attr) { 
 
      return attr.nodeValue == value; 
 
     }).length; 
 
    }); 
 
    }; 
 

 
    $('*').filter_by_attr_value('myvalue').css('background', 'lightgreen'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="target.html" target="myvalue">FOO</a> 
 
<table> 
 
<tr change="myvalue"> 
 
    <td>BAR</td> 
 
</tr> 
 
</table> 
 
<div>not me</div>