Selettore JQuery che utilizza il valore, ma attributo sconosciuto

Question

Come posso utilizzare JQuery per cercare elementi, che hanno un valore di attributo specifico, indipendentemente dal tag dell'attributo?

come:

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

dovrebbe trovare

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

Il primo, a causa del l'attributo "target", il secondo per l'attributo "cambiamento".

C'è una soluzione migliore di una semplice iterazione su tutti gli attributi?

Answer 1

È possibile utilizzare uno pseudo-selettore personalizzato per filtrare gli attributi.

Di seguito è riportato un modo 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

Il $.expr[":"].attrFilter, è un meccanismo di estensione per i selettori personalizzati. Puoi anche passare un parametro.

---

Sintassi:

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

} 

• elem rappresenta l'elemento DOM corrente
• index è l'indice di elem

• match è una matrice che contiene tutte le informazioni sul costume selettore, dove il il parametro passato si trova al 3 ° indice. (Reference 1, Reference 2)

  • match[0] - contiene la chiamata selettore pseudo-classe completa. In questo esempio: attrFilter("value")
  • match[1] - contiene solo il nome del selettore. In questo esempio attrFilter
  • match[2] - indica quale, se esiste, il tipo di virgolette viene utilizzato nel parametro - espressione. vale a dire singolo (') o doppio ("). In questo esempio sarà vuoto.
  • match[3] - fornisce i parametri, ovvero ciò che è contenuto nelle parentesi. In questo esempio `valore

Answer 2

Sì lo stesso approccio sarà seguito anche qui. 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

Ecco un'estensione funzione che è possibile utilizzare per trovare gli elementi che si desidera.

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>