Как найти div с частью имени класса и получить оставшуюся часть имени этого класса?

Question

На моей странице несколько разделов с классами my_widget-2, my_widget-8 и т. Д. Какой код JavaScript или jQuery я могу использовать, чтобы получить число «2» (т. Е. Число, которое добавляет первый соответствующий виджет)?

Примечание. Если бы мне пришлось снова написать этот вопрос, я бы изменил порядок названий этих классов и попросил бы получить значение «8», чтобы не создавалось впечатление, что я хочу меньшее число.

Answer 1

$( "[class*='my_widget']" ).each ( function () {
    var elClasses = $( this ).attr ( 'class' ).split ( ' ' );

    for ( var index in elClasses ) {
        if ( elClasses[index].match ( /^my_widget-\d+$/ ) ) {
            var classNum = elClasses[index].split ( '-' )[1];
            alert ( classNum );
            break;
        }
    }
} );

Используйте селектор " attributeContains ", чтобы получить все элементы, имеющие класс my_widget-*, а затем выполните цикл по всем классам, которые элемент ищет в вашем классе. Как только вы найдете его, извлеките номерную часть.

Answer 2

Базовый подход JS:

<div id="x" class="widget-2 lang-日本語">foo</div>

function Element_getClassArgument(el, name) {
    var classes= el.className.split(' ');
    var prefix= name+'-';
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)==prefix)
            return classes[i].substring(prefix.length);
    return null;
}

Element_getClassArgument(document.getElementById('x'), 'widget'); // 2

Если вы хотите включить пробельные символы или дефис в имя, вам придется ввести некую схему кодирования, например encodeURIComponent.Но часто вы можете обойтись без этого.

Завершение чего-либо с $ в названии оставлено в качестве упражнения для читателя.: -)

Answer 3

Это должно сработать:

$("[class^='my_widget']").each(function() {
    var classParts = $(this).attr('class').split('-');
    var number = classParts.pop();
});

Обратите внимание, что он будет работать только при наличии единственного класса, иначе в результате вы получите что-то вроде 8 otherclass.

Answer 4

Try element.attr('class').match(/my_widget-(\d+)/)[1]

Он должен возвращать номер столбца как строку, поэтому просто запустите parseInt () для него

Answer 5

Если вы хотите получить элементы DIV с классом my_widget-2, используйте этот селектор:

$("div.my_widget-2")

Но если вы хотите получить все элементы DIV с классом вида my_widget-N, где N - произвольное число, попробуйте это:

$("div[class]").each(function() {
    var matches = this.className.match(/(?:^|\s+)my_widget-(\d+)(?:\s+|$)/g);
    if (matches !== null) {
        alert(matches);
    }
})