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

我猜这涉及使用带有选择器的开头 ([attribute^=value])

Answer 1

您可以使用attributeStartsWith 选择器：

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

使用您的标记检查示例 here。

编辑：要获取类名，您可以使用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) 方法来选择其className 以'category' 开头的li 元素：

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

Answer 2

在 @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 中找到类别（可能还有其他类），然后使用 .siblings 找到同一父项的其他子项，然后包含自身，因此您可以将 hover 类添加到元素一次。

我使用 Firefox 和您提供的 HTML 测试了这段代码，效果很好。如果它不是您需要的，请告诉我！