将 div 添加到 html 中显示的日期并分隔日期和月份

Posted 2023-02-22

【中文标题】将 div 添加到 html 中显示的日期并分隔日期和月份

【英文标题】：Add div to the date showing in html and separate the days and month

【发布时间】：2019-04-17 05:54:30

【问题描述】：

我有一些日期列表，我想将 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>

我尝试了追加方法，但我无法选择日期并存储在变量中。

【问题讨论】：

请给我们看看你的JS代码，然后我们就可以看到问题所在了。

你想通过按钮点击吗？

@SilentCoder。我只想写一个jquery代码。

@jrswgtr。我无法在日期中添加 div。如果我可以将 div 添加到日期，然后通过在 Id 或 Class 上使用 append 方法，我可以继续。请，你能展示一下如何将 div 添加到日期。

@jrswgtr。感谢您的支持和回答。

【参考方案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>

【讨论】：

感谢您的完美回答。

【参考方案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>

【参考方案3】：

聚会迟到了。我的解决方案使用date parsing 来提取日期结果。 Prepending divs 在这种情况下要简单得多。

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>

【讨论】：

谢谢你的回答，我也是 Manipal 人。

酷。享受麻省理工学院的生活！

【参考方案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>