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附加到拆分元素

回答

相關問題