jquery seleccionando una clase particular de un elemento

Question

Estoy tratando de agrupar elementos relacionados usando el nombre de la clase. A su vez, todos están relacionados, ya que todos usan el mismo prefijo para el nombre de la clase. Ejemplo:

<ul>
  <li class="category-fruit"></li>
  <li class="category-grain"></li>
  <li class="category-meat"></li>
  <li class="category-fruit"></li>
  <li class="category-meat"></li>
</ul>

Visualmente, quiero una función de desplazamiento en cada uno que, cuando se coloca, aplicará el mismo efecto visual a los otros elementos que comparten el mismo nombre de clase.

Si bien es fácil seleccionar un LI particular con una clase particular, ¿cómo haría para elegir una clase particular del LI suspendido?

Entonces, en pseudocódigo

$("li").hover(function(){
    $(this).[get-the-class-beggining-with"category"]
})

Supongo que esto implica usar los inicios con el selector ([atributo ^ = valor])

Answer 1

Siguiendo el increíble liderazgo de @ CMS, publiqué un ejemplo de trabajo de esta solución para JSBin.

Se me ocurrió una solución que le permite tener clases adicionales en el li's y, después de encontrar a los hermanos correctos, lo almacena en caché para su uso futuro para acelerar la ejecución:

$(function(){
    $("li").hover(function(){
        var $this    = $(this),
            $cache   = $this.data('hoverCache');

        if(!$cache){
            var category = this.className.match(/category\-.+?\b/)      
            $this.data('hoverCache', $this.siblings('.' + category).andSelf().addClass('hover') );
        } else {
            $cache.addClass('hover');
        }

    }, function(){
        var $cache = $(this).data('hoverCache');
        if($cache) $cache.removeClass('hover');
    });
})

Para que no se pierda en este ejemplo optimizado, aquí está el código relevante para su pregunta:

var category = this.className.match(/category\-.+?\b/);
$(this).siblings('.' + category).andSelf();

Esto encuentra la categoría del className (puede haber clases adicionales) y luego encuentra otros hijos del mismo padre usando .siblings y luego se incluye a sí mismo para que usted puede agregar la clase hover a los elementos a la vez.

Probé este código usando Firefox y el HTML proporcionado y funcionó muy bien. ¡Avísame si no es lo que necesitabas!

Answer 2

Puede usar el selector attributeStartsWith :

$("li[class^=category]").hover(/*...*/);

Verifique un ejemplo con su marcado aquí .

Editar: Para obtener el nombre de la clase, puede usar this.className o, usar attr función, por ejemplo:

$("li[class^=category]").each(function(){
  var className = $(this).attr('className');  
  // this.className, or attr('class'), which will be mapped to className
});

Y, por cierto, también puede usar el filter (fn) método para seleccionar los elementos li que su className comienza con 'categoría':

$("li").filter(function () {
  return /category-.+/.test(this.className);
}).hover(/*...*/);