將 div 添加到以 html 顯示的日期並分隔日期和月份

Question

我有一些日期列表，我想將 div 添加到日期並將日期和月份分開到不同的 div。

<div class="campaign">30/11/2016 - 
  <a href="#" target="_blank">Dummy Text</a>
</div>

我想選擇並添加 div 到日期。 我也想像這樣把日子和月份分開。 任何幫助提前表示贊賞。

<div class="campaign"> 
  <div class="date-wrapper">
    <div class="date">30</div>
    <div class="month">Nov</div>
    <div class="year">2016</div>
  </div> 
  <a href="#" target="_blank">Dummy Text</a>
</div>

我已經嘗試了append 方法，但我無法選擇日期並將其存儲在變量中。

Answer 1

您可以使用.prepend( function )在元素的第一個中插入新的 HTML 內容。

 var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; $(".campaign").prepend(function(){ var dates = $(this).contents()[0].nodeValue.trim().match(/\\d+/g); $(this).contents()[0].nodeValue = ""; return '\\ <div class="date-wrapper">\\ <div class="date">'+dates[1]+'</div>\\ <div class="month">'+monthNames[+dates[0]-1]+'</div>\\ <div class="year">'+dates[2]+'</div></div> \\ </div>'; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="campaign">11/30/2016 - <a href="#" target="_blank">Dummy Text</a> </div>

Answer 2

檢查這是否適合您？

 $('#convert').click(function(){ let date = $('.campaign').text().split('/'); let dateDiv ='<div class="date">'+date[1]+'</div>'; let monthDiv = '<div class="month">'+date[0]+'</div>'; let yearDiv = '<div class="year">'+date[2]+'</div></div>'; $('.campaign').html(dateDiv + monthDiv + yearDiv) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="campaign">11/30/2016 - <a href="#" target="_blank">Dummy Text</a> </div> <button id="convert">Convert</button>

Answer 3

聚會有點晚了。 我的解決方案使用date parsing來提取日期結果。 在這種情況下， Prepending div 要簡單得多。

 var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; var campaign = $($('.campaign')[0]); var dateString = campaign.text().split('-')[0]; var date = new Date(Date.parse(dateString)); campaign.contents()[0].nodeValue = ""; campaign.prepend('<div class="year">'+date.getFullYear()+'</div>'); campaign.prepend('<div class="month">'+months[date.getMonth()]+'</div>'); campaign.prepend('<div class="date">'+date.getDate()+'</div>');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="campaign">11/30/2016 - <a href="#" target="_blank">Dummy Text</a> </div>

Answer 4

嘗試一下。

 $('.campaign').each(function(){ var dateStr = $(this).text().split('/'), dateDD = dateStr[0], dateMM = dateStr[1], dateYY = dateStr[2]; function GetMonthName(monthNumber) { var months = ['Jan', 'Feb', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Dec']; return months[monthNumber - 1]; } var newDate = '<div class="campaign1">'+'<div class="date-wrapper">'+'<div class="date">'+dateStr[0]+'</div>'+ ' <div class="month">'+GetMonthName(dateMM) + '</div> ' + '<div class="year">'+dateStr[2]+'</div>'+'</div>'+'<a href="#" target="_blank">Dummy Text</a>'+'</div>'; $('.test').append(newDate); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="campaign">30/11/2016</div> <a href="#" target="_blank">Dummy Text</a> <div class="test"></test>