jquery, выбрав конкретный класс из элемента

Question

Я пытаюсь группировать связанные элементы, используя имя класса. Они, в свою очередь, связаны друг с другом, поскольку все они используют один и тот же префикс для имени класса. Пример:

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

Визуально, я хочу функцию парения на каждом, что при наведении указателя мыши, будет применяться тот же визуальный эффект других элементов, разделяющих то же имя класса.

В то время как легко выбрать конкретный LI с определенным классом, как бы я мог выбрать определенный класс из зависающего LI?

Таким образом, в псевдокоде

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

Я предполагаю, что это связано с использованием начинается с селектора ([атрибут^= значение])

Answer 1

После @ удивительном свинца CMS, я разместил working example этого раствора JSBin.

Я придумал решение, которое позволяет иметь дополнительные занятия по li's и, после того, как он находит правильные братьев и сестер он кэширует его для использования в будущем, чтобы ускорить выполнение:

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

Так это не запутаться в этом оптимизированной, например, здесь соответствующий код на свой вопрос:

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

Это находит категорию из className (там могут быть дополнительные классы), а затем он находит других детей того же р arent, используя .siblings, а затем включает в себя, чтобы вы могли одновременно добавить класс hover.

Я протестировал этот код с помощью Firefox и предоставленного HTML-кода, и он отлично поработал. Дайте мне знать, если это не то, что вам нужно!

Answer 2

Вы можете использовать attributeStartsWith селектор:

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

Просмотрите пример с вашей разметкой here.

Edit: Чтобы получить имя класса вы можете использовать this.className или используйте функцию attr, например:

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

И, кстати, вы можете также использовать метод filter(fn) для выбора li элементы, которые их имя класса начинается с «категории»:

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