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, я опубликовал рабочий пример этого решения для 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, и он отлично работал. Дайте мне знать, если это не то, что вам нужно!

Answer 2

Вы можете использовать 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
});

И, кстати, вы также можете использовать фильтр (fn) метод выбора элементов li , для которых их className начинается с 'category':

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