在jQuery中查找匹配的类名

我在页面中有一系列图像缩略图。它们是使用css精灵创建的。在jQuery中查找匹配的类名

<div class="galleryImg1"></div> 
<div class="galleryImg2 featured"></div> 
<div class="galleryImg3"></div>

我最初使用id="galleryImg1"而是改为使用class="galleryImg1"因为图像可能会出现在同一个页面上的多个地方，我想，以避免重复的ID。

我有一个jQuery选择器将点击事件附加到所有这些类。

$("[class^=galleryImg]").click(function() { 
    // how do i get 'galleryImg2' and '2' here? 
}

什么我不知道是如果有一个简单的方法来找出一个className与被点击“GALLERYIMG”开头。我必须使用正则表达式还是有一种“更聪明”的方式？

（是的，如果我使用#ID选择器，那么我可以只说'this.id'，但如前所述我不想使用ID，因为我想显示同一图像的多个副本。）

来源

2009-02-16 Simon_Weaver

据我所知，你将需要一个非常基本的正则表达式，像这样：

$("[class^=galleryImg]").click(function(Event) { 
    var id = this.className.match(/galleryImg(\d+)/)[1]; 
    console.log(id); 
});

但是，如果你特别反对这一点，你可以使用类似这样的东西，它不会验证，但会得到工作完成。

<div class="galleryImg1" image_id="1"></div> 
<div class="galleryImg2 featured" image_id="2"></div> 
<div class="galleryImg3" image_id="3"></div> 

<script> 
$("[class^=galleryImg]").click(function(Event) { 
    var id = $(this).attr('image_id'); 
    console.log(id); 
}); 
</script>

因为我假设你有超过你的HTML的完全控制，你知道GALLERYIMG类将始终遵循由ID，我不认为这里正则表达式是邪恶的。放手去做！

来源

2009-02-16 05:13:26

您可以使用正则表达式，但使用split和indexof会被更多程序员理解。对于这么简单的事情，也许更好的避免正则表达式。

在事件处理中使用jQuery的标准化活动对象：

$("[class^=galleryImg]").click(function(Event) { 
    var classAttribute=Event.target.className 

    var classes=classAttribute.split(" "); 

    for (var i=0;i<classes.length;i++) 
    { 
     if (classes[i].indexOf('targetClassNamePrefix')==0) 
     { 
      // This element has the required class, do whatever you need to. 

     } 
    } 
}

来源

2009-02-16 05:05:00 Ash

他要拿出ID出来的，虽然。 – 2009-02-16 05:13:39

@ash这个问题是可能有多个类。我忘了*明确*提到，但是这就是为什么我把'galleryImg2精选'放在一个类名称' – 2009-02-16 05:19:38

我知道你有多个类名称，我只是虽然你问实际上获得单击元素的类。我也更新了我的答案，Regex比较慢，只是使用Javascript拆分，然后indexOf（）== 0。 – Ash 2009-02-16 05:31:05

我做的是这样的：

<div class="galleryImg 1"></div> 
<div class="galleryImg 2 featured"></div> 
<div class="galleryImg 3"></div> 

<script> 
$(".galleryImg").click(function(Event) { 
    var Class = $(this).attr('class').split(" "); 
    var id = Class[1] 
}); 
</script>

来源

2012-03-14 09:39:46 Marcel

在jQuery中查找匹配的类名

回答

相关问题