1

下面的 HTML 显示同一 DATE 类中的日期和时间。这不好，因为我想独立地设计它们。但我不能按原样，所以我认为可以注入 jquery 来拆分它。

<div class="container">
    <a class="title" href="http://www.example.com">Headlines Goes Here</a>
    <div class="date">Jan 29, 2013 12:05:00 PM EST</div>
    <div class="post">
        <p>Content Goes Here</p>
    </div>
</div>

我希望在有人的帮助下，这可以通过在 DATE 类中附加来解决，因此输出如下所示：

<div class="container">
    <a class="title" href="http://www.example.com">Headlines Goes Here</a>
    <div class="date">Jan 29, 2013</div><div class="time">12:05:00 PM EST</div>
    <div class="post">
        <p>Content Goes Here</p>
    </div>
</div>

到目前为止，这是我的 JQUERY，我将其设置为红色，因此我可以看到物理变化，有人可以帮助解决这个问题吗？我的 jquery 显然不正确。

$(window).load(function(){
         if ($(".date:contains(', 2013')").length)
             this.parentNode.append(this).html("</div><div class=time style=color:red>");
});

这是我的小提琴：http: //jsfiddle.net/3ZWkQ/

4

2 回答 2

1

理想情况下，您希望在服务器端执行此操作，以避免更改实际文档结构。

但如果这是不可能的，你可以通过以下方式做到这一点：

$(function() {
  $(".date").after(function() {
    var val = $(this).text();
    var justDate = val.substring(0,12);
    $(this).text(justDate);
    var parsedTime = val.substring(12);
    return "<div class=time >" + parsedTime + "</div>";
  });
});

注意：这里我只是使用 substring 进行拆分，但这显然不是正确的实现，你最好解析为 Date 并使用 jquery 插件、原型等格式化部分。

这是小提琴：http: //jsfiddle.net/MS3W6/

于 2013-02-12T19:15:29.247 回答
0

更改此部分：

this.parentNode.append(this).html("</div><div class=time style=color:red>")

到：

$(this.parentNode).append("<div class=time style=color:red></div>")
于 2013-02-12T19:04:08.100 回答