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"]
})

나는 이것이 selector와 함께 시작을 사용하는 것과 관련이 있다고 생각합니다 ([속성^= value])

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

당신은 사용할 수 있습니다 agtibutestartswith 선택자:

$("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 클래스 이름이 '카테고리'로 시작하는 요소 :

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