jquery sélection d'une classe particulière à partir d'un élément

Question

J'essaie de regrouper des éléments liés à l'aide du nom de la classe. À leur tour, ils sont tous liés car ils utilisent tous le même préfixe pour le nom de la classe. Exemple:

<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>

Visuellement, je souhaite une fonction de survol sur chaque élément qui, une fois survolé, appliquera le même effet visuel aux autres éléments partageant le même nom de classe.

S'il est facile de sélectionner un LI particulier avec une classe particulière, comment puis-je choisir une classe particulière du LI survolé?

Donc, en pseudo-code

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

Je suppose que cela implique l'utilisation du sélecteur de départ avec ([attribut ^ = valeur])

Answer 1

Suivant l’incroyable piste de @ CMS, j’ai envoyé un exemple de travail de cette solution sur JSBin.

J'ai mis au point une solution qui vous permet d’avoir des classes supplémentaires sur le li et, après avoir trouvé les frères et soeurs appropriés, il le met en cache pour une utilisation ultérieure afin d’accélérer l’exécution:

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

Pour que cet exemple optimisé ne se perde pas, voici le code correspondant à votre question:

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

Ceci trouve la catégorie dans le className (il peut y avoir des classes supplémentaires), puis trouve d'autres enfants du même parent à l'aide de .siblings , puis s'inclut pouvez ajouter la classe hover aux éléments en même temps.

J'ai testé ce code avec Firefox et votre HTML fourni et cela a très bien fonctionné. Faites-moi savoir si ce n'est pas ce dont vous aviez besoin!

Answer 2

Vous pouvez utiliser le sélecteur attributeStartsWith :

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

Consultez un exemple avec votre balise ici .

Modifier: pour obtenir le nom de la classe, vous pouvez utiliser this.NomClass ou utilisez la attr , par exemple:

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

Et vous pouvez également utiliser le filtre (fn) méthode pour sélectionner les éléments li avec lesquels leur nom de classe commence par 'category':

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