JQuery получить определенное имя класса
У меня есть div с несколькими классами без определенного порядка.
<div class="whatever styledark myclass"></div>
Мне интересен класс styledark. Это может быть styledark, stylewhite, stylered.... Я хочу получить это имя класса независимо от того, какой цвет происходит после стиля слова. Вопрос в том, когда я нажимаю на div, как я предупреждаю это имя класса, которое начинается со словарного стиля, игнорируя другие классы в div. Классы не имеют определенного порядка.
Ответы
Ответ 1
Это отличный вопрос. Хотя это можно сделать, используя многие из упомянутых здесь ответов, это немного неудобно и дорого стоит. То, как я бы рекомендовал вам это сделать, - это положить класс стиля последним, таким образом, только с одной строкой кода вы можете вывести имя класса, которое вы после.
$('element').attr('class').split(' ').pop();
Ответ 2
$('div').click(function() {
var style = this.className.split(/\s/).filter(function( cn ) {
return cn.indexOf('style') === 0;
});
alert(style);
});
Примечание. Этот код использует Array.prototype.filter
и .indexof()
, который недоступен в старых браузерах. Чтобы сделать это более общим, он будет выглядеть так:
$('div').click(function() {
var name = '';
$.each(this.className.split(/\s/), function( _, cn ) {
if( cn.indexOf('style') === 0 ) { name = cn; return false; }
});
alert(name);
});
Ответ 3
Я использовал атрибут classList, но, к сожалению, кажется, что он не в сафари.:(
Следующее - это то, что я придумал, но RegExp может потребоваться только небольшая настройка.
$('div.button').each(function() {
$m = this.className.match(/(^|\s)style\S+(\s|$)/);
if($m) {
$(this).bind('click', { colorName : $m[0] }, function(e) {
alert(e.data.colorName);
);
}
});
Ответ 4
Найдено здесь: http://forum.jquery.com/topic/jquery-how-to-pick-out-classes-that-start-with-a-particular-string
var icons = ["Star", "Plus", "Left", "Right", "Up", "Down"];
$("div.button").each(function() {
var $dv = $(this);
$.each(icons, function() {
if ($dv.hasClass("icon" + this)) {
$dv.append('<img src="Images/' + this + '.gif" alt="" />');
return false;
}
});
});
Ответ 5
$('div').click(function(){
var c = $(this).attr('class').split(/\s+/);
for(var s in c)
if(c[s].indexOf('style') == 0)
alert(c[s]);
});
живой пример: http://jsfiddle.net/gion_13/rXkNy/1/
Ответ 6
Предполагая, что у вас есть список имен классов в переменной, называемой "classes":
classes = classes.split(" ");
for (var i=0; i<classes.length; i++)
{
var class = classes[i];
if (class.indexOf("style") == 0)
{
alert(class);
}
}
Ответ 7
$("div[class]").click(function(e){
$.each(this.className.split(/\s/), function(i, val) {
if (/^style/.test(val)) {
alert(val.substr(5));
return false;
}
});
});
Ответ 8
$('element').attr("class").split(" ").filter(getStyleClass);
function getStyleClass(value) {
return value.indexOf("style") > -1;
}
И чтобы предупредить класс 'style' при щелчке, как вы указали:
$('element').click(function()[
var style_class = $(this).attr("class").split(" ").filter(getStyleClass);
alert(style_class);
}
// include the same getStyleClass from above
больше глубины:
$('element').attr("class").split(" ")
- хороший старт - он помещает классы в массив, но .pop()
просто удаляет последний элемент массива, и это не решает проблему.
.filter()
- отличное решение, потому что вы можете написать небольшую функцию, которая решает, какие элементы вы хотите.
В нашем случае нам нужны только элементы массива, которые имеют "стиль". Мы можем использовать .indexOf()
, чтобы определить, содержит ли строка "стиль": value.indexOf("style") > -1
.