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

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：

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

 });

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

OR

获得此类输出的其他任何方式？

第一张图片中显示的预期结果

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>')
    });
});

演示：Fiddle

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/