Найти динамическое имя класса элемента с JQuery

Question

Я имею неизвестное количество элементов, как так:

<div class="item item-1"></div> 
<div class="item item-2"></div> 
<div class="item item-3"></div> 

То, что я хочу сделать, это проверить, если каждый элемент имеет имя класса, начиная с «item-». Если true, то извлеките идентификатор. Что-то вроде этого:

$("container").each(function 
    if ($(this).hasClassNameStartingWith("item-")) 
     console.debug(theId); 
); 

Как это возможно?

Заранее благодарен!

Answer 1

Используйте содержит селектор по атрибуту класса:

$('container[class*=" item-"]').each(function() { 
    var classID = null; 
    var classes = $(this).attr('class').split(' '); 
    for (var i = 0, len < classes.length; i < len; ++i) { 
     var class = classes[i]; 
     if (class.match(/^item-/)) { 
      classID = class.replace("item-",''); 
      break; 
     } 
    } 
    if (classID) { 
     ... do something ... 
    } 
}); 

Обратите внимание на использование кавычек включить пространство, учитывая ваш пример разметки. Вы также можете опустить пробел, если класс «item-N» мог появиться в начале списка, и вы были уверены, что не было никаких классов, которые случайно совпадали бы с этой строкой.

Обновленный пример, чтобы показать, как извлечь часть идентификатора имени класса.

Answer 2

Вы можете выполнить соответствие регулярного выражения на class атрибуте дочерних элементов:

var itemIDRe = /(?:^|[ \t\n\r\f\u200b]+)item-([^ \t\n\r\f\u200b]+)/; 

$('#container').children().each(function() { 
    var match = itemIDRe.exec($(this).attr('class')); 
    var itemID = match ? match[1] : null; 

    // Do something with itemID. 
}); 

Регулярное выражение основано на определении HTML 4 для class attribute и white space.