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

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

});

我要像第一附属输出image.is有可能拆分字符串，并用HTML加上？

或

任何其他方式来获得这样的输出？在第一图像显示

预期结果

enter image description here output needed

来源

2013-08-23 Jack Torris

它看起来像一些CSS问题http://jsfiddle.net/arunpjohny/8Vx3V/1/ –

了输出像attched图像您的代码，但我想添加HTML代码到它。 8 25 –

此代码应该做你想要什么：

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/

来源

2013-08-23 10:15:57

基于评论

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

来源

2013-08-23 10:15:09

这很酷，你能解释正则表达式如何与$ 1和$ 2工作？ – Stokedout

这些用于指代在正则表达式中指定的组 –

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

回答

相关问题