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

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

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

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

Редактировать: Чтобы получить имя класса, вы можете использовать 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 элементы, которые их className начинается с 'category':

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

Answer 2

Следуя потрясающему примеру @ CMS, я опубликовал рабочий пример этого решения для 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 (могут быть дополнительные классы), а затем находит других потомков того же родителя, используя .siblings, а затем включает себя, так что вы можете добавить класс hover к элементам в один раз.

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