jQuery查找类并将其存储为变量

Question

我有几个<div>，其中包含timeline-year-的课程，然后是附加的课程。

我试图找到包含年份的类，并将年份提取到变量中，以便将文本附加到div内。

http://jsfiddle.net/ubL7h10u/

<div class="jsn-bootstrap3 timeline-events timeline-year-2012">
    Year
</div>
<div class="jsn-bootstrap3 timeline-events timeline-year-2011">
    Year
</div>

Answer 1

使用text方法和一些常规尝试来实现它的方法之一：

$('[class*="timeline-year"]').text(function () {
    return $(this).text() + ' ' + this.className.match(/timeline-year-(\d+)?/)[1];
});

演示：http://jsfiddle.net/ubL7h10u/8/

但如果你这样做，你会让你的代码更清洁：

<div class="jsn-bootstrap3 timeline-events" data-year="2012">Year</div>
<div class="jsn-bootstrap3 timeline-events" data-year="2011">Year</div>

然后：

$('.timeline-events').text(function () {
    return $(this).text() + ' ' + $(this).data('year');
});

在这种情况下只有CSS的

或事件：

.timeline-events:after {
    content: ' ' attr(data-year);
}

CSS演示：http://jsfiddle.net/ubL7h10u/10/

Answer 2

假设您希望年份文本不在class属性中。

$('[class*="timeline-year"]').each(function(){
    var classString = $(this).attr('class');
    var year = classString.match(/\d+$/)[0];
    console.log(year);
});

<强>演示：

http://jsfiddle.net/ubL7h10u/9/

Answer 3

$('[class*="timeline-year"]').each(function(){
            var year = $(this);
            var list = $(this).attr("class").split(" ");
            for(var i =0; i < list.length; i++)
            {
                if(list[i].indexOf("timeline-year") !== -1)
                {
                    $(this).html(list[i].split("-")[2])
                }
            }
        });

Answer 4

另一种方法：获取class属性的内容，然后获取该字符串的最后4个字符：http://jsfiddle.net/ubL7h10u/5/

$('[class*="timeline-year"]').each(function(){
        var classname = $(this).attr('class');
        var year = classname.substr(classname.length - 4);
        console.log(year);
    });