[英]jquery get certain class name of element which has several classes assigned
I need to read elements class name. 我需要读取元素类名。 I have elements like this: 我有这样的元素:
<article class="active clrone moreclass">Article x</article>
<article class="active clrtwo moreclass">Article y</article>
<article class="active clrthree moreclass moreclass">Article z</article>
<article class="active clrone moreclass">Article xyza</article>
I need to parse out class name that starts with clr
. 我需要解析以clr
开头的类名。 So if second element was clicked then I would need to get clrtwo
className. 因此,如果单击第二个元素,那么我需要获得clrtwo
className。
You can use a regular expression match on the class name of the clicked item to find the class that begins with "clr" like this: 您可以对所单击项的类名使用正则表达式匹配,以查找以“clr”开头的类,如下所示:
$("article").click(function() {
var matches = this.className.match(/\bclr[^\s]+\b/);
if (matches) {
// matches[0] is clrone or clrtwo, etc...
}
});
Here is solution for you: 这是您的解决方案:
$('article').click(function () {
var className = this.className.split(' ');
for (var i = 0; i < className.length; i+=1) {
if (className[i].indexOf('clr') >= 0) {
alert(className[i]);
}
}
});
http://jsfiddle.net/vJfT7/ http://jsfiddle.net/vJfT7/
There's no matter how you're going to order the different classes. 无论你怎么订购不同的课程。 The code will alert you a class name only of there's 'clr' as a substring in it. 代码将提醒您一个类名,只有'clr'作为其中的子字符串。
Best regards. 最好的祝福。
If you don't need to find elements based on these classes (eg doing $('.clrtwo')
) it would be nicer to store the data as a data-clr
attribute. 如果您不需要根据这些类找到元素(例如,执行$('.clrtwo')
),那么将数据存储为data-clr
属性会更好。 This is standards-compliant from HTML5, and is supported by jQuery using the .data()
function. 这符合HTML5标准,jQuery使用.data()
函数支持。
In this instance, I would modify your HTML in this way: 在这种情况下,我会以这种方式修改您的HTML:
<article class="active moreclass" data-clr="one">Article x</article>
<article class="active moreclass" data-clr="two">Article y</article>
<article class="active moreclass moreclass" data-clr="three">Article z</article>
<article class="active moreclass" data-clr="one">Article xyza</article>
I would then use Javascript like this: 然后我会使用这样的Javascript:
$('article.active').click(function() {
console.log($(this).data('clr'));
});
If it is always the second class name which is of interest you can do this: 如果它始终是您感兴趣的第二个类名,您可以这样做:
$("article").click(function () {
// split on the space and output the second element
// in the resulting array
console.log($(this)[0].className.split(" ")[1]);
});
http://jsfiddle.net/karim79/Z3qhW/ http://jsfiddle.net/karim79/Z3qhW/
Use an attribute selector to get those that have class names that contain clr
. 使用属性选择器来获取具有包含clr
类名的那些。
From there: 从那里:
The latter two might be best served by a translation array if you only had a few classes. 如果您只有几个类,则后两个可能最好由翻译数组提供。
I agree with lonesomeday , you'd be far better off using data-* attribute to handle such logic. 我同意lonesomeday ,你最好使用data- *属性来处理这样的逻辑。 Using CSS as JavaScript hooks is a thing of the past. 使用CSS作为JavaScript钩子已经成为过去。
<script type="text/javascript">
jQuery(document).ready(function(){
$("article").click(function(){
alert($(this).attr('class').match(/\bclr[^\s]+\b/)[0]);
});
});
</script>
This should jquery script should do what you asked (tested on jsfiddle): 这应该jquery脚本应该做你所要求的(在jsfiddle上测试):
$(document).ready(function () {
function getClrClass(elem) {
var classes = elem.getAttribute('class').split(' ');
var i = 0;
var cssClass = '';
for (i = 0; i < classes.length; i += 1) {
if (classes[i].indexOf('clr') === 0) {
cssClass = classes[i];
i = classes.length; //exit for loop
}
}
return cssClass;
};
$('article').click(function (e) {
var cssClass = getClrClass($(this)[0]);
alert(cssClass);
e.preventDefault();
return false;
});
});
Hope this helps. 希望这可以帮助。
Pete 皮特
http://jsfiddle.net/4KwWn/ http://jsfiddle.net/4KwWn/
$('article[class*=clr]').click(function() {
var token = $(this).attr('class'),
position = token.indexOf('clr');
token = token.substring(position, token.indexOf(' ', position));
alert(token);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.