Trova HTML basato sull'attributo parziale

Question

C'è un modo con javascript (in particolare jQuery) per trovare un elemento basato su un attributo parziale nome?

io non sono alla ricerca di uno dei selettori che trovano i valori degli attributi parziali come riferito in questi link:

• starts with [nome^= "valore"]
• contains prefix [nome | = "valore" ]
• contains [nome * = "valore"]
• contains word [nome ~ = "valore"]
• ends with [nome $ = "valore"]
• equals [name = "valore"]
• not equal [nome! = "Valore"]
• starts with [nome^= "valore"]

ma qualcosa di più lungo le linee di

<div data-api-src="some value"></div> 
<div data-api-myattr="foobar"></div> 

e

$("[^data-api]").doSomething() 

af ind qualsiasi elemento che ha un attributo che inizia con "data-api".

Answer 1

Non so che cosa è che stai cercando, ma appena trascorso alcuni minuti a scrivere questo:

$.fn.filterData = function(set) { 
    var elems=$([]); 
    this.each(function(i,e) { 
     $.each($(e).data(), function(j,f) { 
      if (j.substring(0, set.length) == set) { 
       elems = elems.add($(e)); 
      } 
     }); 
    }); 
    return elems; 
} 

Per essere usato come:

$('div').filterData('api').css('color', 'red'); 

e sarà prodotto risultati in nessun elementi con un attributo dati come data-api-*, e puoi estenderlo e modificarlo per includere più opzioni ecc. ma al momento cerca solo attributi di dati e combacia solo con 'inizia con', ma almeno è semplice da usare?

FIDDLE

Answer 2

Questo utilizza .filter() per limitare i candidati a quelli che ha data-api-* attributi. Probabilmente non è l'approccio più efficiente, ma utilizzabile se prima è possibile restringere la ricerca con un selettore rilevante.

$("div").filter(function() { 
    var attrs = this.attributes; 
    for (var i = 0; i < attrs.length; i++) { 
     if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;  
    }; 
    return false; 
}).css('color', 'red'); 

Demo: http://jsfiddle.net/r3yPZ/2/

---

Questo può anche essere scritto come un selettore. Ecco il mio tentativo novizio:

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) { 
    for (var i = 0; i < obj.attributes.length; i++) { 
     if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true; 
    }; 
    return false; 
}; 

Usage:

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red'); 

Demo: http://jsfiddle.net/SuSpe/3/

Questo selettore dovrebbe funzionare per i pre-1.8 versioni di jQuery. Per 1.8 e oltre, some changes may be required. Ecco un tentativo di una versione 1.8-compliant:

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) { 
    return function(obj) { 
     for (var i = 0; i < obj.attributes.length; i++) { 
      if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true; 
     }; 
     return false; 
    }; 
}); 

Demo: http://jsfiddle.net/SuSpe/2/

---

Per una soluzione più generica, ecco un selettore che prende un modello di espressione regolare e seleziona gli elementi con gli attributi che corrispondono a questo schema :

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) { 
    var re = new RegExp(regex); 
    return function(obj) { 
     var attrs = obj.attributes 
     for (var i = 0; i < attrs.length; i++) { 
      if (re.test(attrs[i].nodeName)) return true; 
     }; 
     return false; 
    }; 
}); 

Per esempio, qualcosa come questo dovrebbe funzionare:

$('div:hasAttr(^data-api-.+$)').css('color', 'red'); 

Demo: http://jsfiddle.net/Jg5qH/1/