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 クラス内に追加することで jquery で解決できることを願っています。

<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>";
  });
});

注: ここでは分割に部分文字列を使用しましたが、それは明らかに正しい実装ではありません。日付に解析し、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 に答える