jquery - jQuery：拆分字符串并将html附加到拆分元素

Question

有多个事件日期 div。

HTML：

 <div class="event-dates">Aug 28</div>
 <div class="event-dates">Aug 28</div>
 <div class="event-dates">Aug 28</div>
 <div class="event-dates">Aug 28</div>

查询：

 jQuery.noConflict();
 jQuery(document).ready(function(){
      jQuery(".event-dates").each(function() {
           jQuery(this).html(jQuery(this).html().replace(/ /g, '<br />'));
      });

 });

我想要像第一个附加图像一样的输出。是否可以拆分字符串并附加 html？

或者

还有其他方法可以获得这样的输出吗？

预期结果如第一张图片所示

Answer 1

根据评论

jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery(".event-dates").html(function(idx, html) {
        return html.replace(/([a-z]+)\s(\d+)/i, '<span class="firest">$1</sapn><span class="day">$2</span>')
    });
});

演示：小提琴

Answer 2

这段代码应该做你想做的事：

JS

jQuery.noConflict();    
jQuery(document).ready(function(){
    jQuery(".event-dates").html(function(index, oldHtml) {
        var split = oldHtml.split(' ');
        return '<div class="month">' + split[0] + '</div><div class="day">' + split[1] + '</div>';
    });    
});

CSS

div.event-dates {
    width: 50px;
    height: 50px;
    border: 1px solid #666666;
}

div.month {
    width: 50px;
    height: 20px;
    text-align: center;
    font-size: 16px;
}

div.day {
    width: 50px;
    height: 24px;
    text-align: center;
    font-size: 24px;
}

示例 - http://jsfiddle.net/ex8x7/