[英]Add div to the date showing in html and separate the days and month
我有一些日期列表,我想将 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 方法,但我无法选择日期并将其存储在变量中。
您可以使用.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>
检查这是否适合您?
$('#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>
聚会有点晚了。 我的解决方案使用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>
尝试一下。
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.