Buscar HTML basado en el atributo parcial

Question

¿Hay alguna manera con javascript (particularmente jQuery) para encontrar un elemento basado en un atributo parcial nombre?

No estoy buscando para cualquiera de los selectores que se encuentran valores de atributos parciales como se indica en los siguientes enlaces:

• starts with [nombre^= "valor"]
• contains prefix [nombre | = "valor" ]
• contains [nombre * = "valor"]
• contains word [nombre ~ = "valor"]
• ends with [$ name = "valor"]
• equals [name = "valor"]
• not equal [nombre! = "Valor"]
• starts with [nombre^= "valor"]

pero más algo en la línea de

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

y

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

a f ind cualquier elemento que tenga un atributo que comience con "data-api".

Answer 1

No está seguro de qué es lo que está buscando, pero sólo pasó unos minutos para escribir esto:

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

Para ser utilizado como:

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

Y se han encontrado elementos con una Atributo de datos como data-api-*, y puede ampliarlo y modificarlo para incluir más opciones, etc. pero en este momento solo busca atributos de datos, y solo coincide con 'comienza con', pero al menos es fácil de usar.

FIDDLE

Answer 2

Esto utiliza .filter() para limitar los candidatos a los que tiene data-api-* atributos. Probablemente no sea el enfoque más eficiente, pero se puede utilizar si primero puede limitar la búsqueda con un selector relevante.

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

Demostración: http://jsfiddle.net/r3yPZ/2/

---

Esto también se puede escribir como un selector. Aquí está mi intento de novato:

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

Uso:

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

Demostración: http://jsfiddle.net/SuSpe/3/

Este selector debe trabajar para pre-versiones de jQuery 1.8. Para 1.8 y más allá, some changes may be required. He aquí un intento de una versión 1.8 compatible con:

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

Demostración: http://jsfiddle.net/SuSpe/2/

---

Para una solución más genérica, aquí hay un selector que tiene un patrón de expresión y selecciona los elementos con atributos que coincidan con ese patrón :

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

Para su ejemplo, algo como esto debería funcionar:

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

Demostración: http://jsfiddle.net/Jg5qH/1/