1. 首页
  2. 问题列表
  3. Jquery尝试将单个消息拆分成2个html元素
提问者：小点点

Jquery尝试将单个消息拆分成2个html元素


嗨，我有下面这行代码，它从API调用接收数据，并在HTML页面中显示它们。

$.getJSON("https://localhost:44326/api/Facebook/GetFeed?accessToken=" + response.authResponse.accessToken)
    .done(function (data) {
        $.each(data, function (key, item) {
            console.log(item);
                for (i in item) {
                    $('<li>', { text: 'Message: ' + item[i].message +' Time: '+ item[i].created_time.data }).appendTo($('#wellForFeed'));
                }
        });
    });

现在我想知道几件事。 首先，我将message和time都存储在1元素中，如下所示:

Message: Test post for my api Time: 2020-06-07T08:53:08+0000

但是，我想把消息存储在一个元素中，把时间存储在一个单独的元素中。 但是，我尝试了一下，结果是所有的消息都在一起，然后消息的日期和时间都在它们下面，如下所示:

Message: ABC
Message: DEF
Message: GHI

Time: 2020-06-07T08:53:08+0000
Time: 2020-06-07T08:53:08+0000
Time: 2020-06-07T08:53:08+0000

但是，我要他们这样:

Message: ABC
Time: 2020-06-07T08:53:08+0000

Message: DEF
Time: 2020-06-07T08:53:08+0000

Message: GHI
Time: 2020-06-07T08:53:08+0000

此外，我想要格式化我的日期，但我不知道怎么做。


共2个答案

匿名用户

要实现这一点，您可以将message和created_timein拆分为单独的元素，这些元素出现在父元素li中各自的行上。 在下面的示例中，我使用了p元素，但是可以根据您的需要进行修改:

$.getJSON("https://localhost:44326/api/Facebook/GetFeed?accessToken=" + response.authResponse.accessToken).done(function(data) {
  $.each(data, function(key, item) {
    for (i in item) {
      $(`<li><p>Message: ${item[i].message}</p><p>Time: ${item[i].created_time.data}</p>`).appendTo('#wellForFeed');
    }
  });
});

匿名用户

像这样的？

日期格式说明请参阅此处

如何格式化JavaScript日期

null

const items = [
  { message : "ABC" , created_time: { data : "2020-06-07T08:53:08+0000" }},
  { message : "DEF" , created_time: { data : "2020-06-07T08:53:08+0000" }},
  { message : "GHI" , created_time: { data : "2020-06-07T08:53:08+0000" }}
]

let html = [];
$.each(items, function(i,item) {
  const date = new Date(item.created_time.data);
  html.push('<li>Message: ' +item.message+'</li>')
  html.push('<li>Time: ' + date.toLocaleDateString() + " " + date.toLocaleTimeString() +'</li>')
});
$('#wellForFeed').html(html.join(""))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="wellForFeed">
</ul>

相关问题