0

内部に p 要素を持つ div 要素 ( #receivedInfo ) があります。各 p 要素には日付があります。各要素からこの日付を取り出して、現在の日付と比較することができました。
各要素を現在の日付と比較した後、それらを 2 つの div に移動します。

  • 現在の日付より後の日付を持つすべての要素を含むもの (" .licitatiiActive ")
  • もう 1 つは、現在の日付よりも古い日付を持つすべての要素を含む (" .licitatiiInactive ")

比較はできましたが、移動できるのは 1 つの要素だけです。

私が使用するHTMLは次のとおりです。

<div id="receivedInfo" class="hidden">
    <p>16.10.2012 - <a href="#">test line 1</a></p>
    <p>16.10.2012 - <a href="#">test line 2</a></p>
    <p>16.10.2012 - <a href="#">test line 3</a></p>
    <p>16.10.2012 - <a href="#">test line 4</a></p>
</div>
<div class="licitatiiActive"></div>
<div class="licitatiiInactive"></div>

そして、これが私が使用するjQueryです：

var fullDate = new Date();
var twoDigitMonth = (fullDate.getMonth()+1)+"";
if(twoDigitMonth.length==1) twoDigitMonth="0" +twoDigitMonth;
var twoDigitDate = fullDate.getDate()+"";
if(twoDigitDate.length==1)  twoDigitDate="0" +twoDigitDate;
var currentDate = twoDigitDate + "." + twoDigitMonth + "." + fullDate.getFullYear();

var dataLic;
var infoP;

$.each($("#receivedInfo p"), function () {
    var info = $(this).html();
    dataLic = info.split(' - ')[0].trim();
    infoP = "<p>" + info + "</p>";

});
if (dataLic > currentDate) {
        $(".licitatiiInactive").html(infoP);
    } else {
        $(".licitatiiActive").html(infoP);
    }

前述のように、結果として、div " #receivedInfo " の最初の p 要素のみが div " .licitatiiInactive "に移動されます。このスクリプトを調整して、「#receivedInfo」の各要素を適切な div に移動するにはどうすればよいですか?

4

3 に答える 3

1

ループ外の関連部分と同じサンプル日付

Chrome 開発ツールと console.log を使用してデバッグしようとすると、毎回同じ日付が表示されたので、最初は驚きました。その理由は、すべてのサンプルの日付が同じだったからです。

以下に、実用的なソリューションを示します。var dataLic は each-loop に入力され、その現在の値は appendDate によって処理されます。

$.each($("#receivedInfo p"), function () {              
    dataLic = $(this).html().split(' - ')[0].trim();                
    console.log("dataLic", dataLic, "currentDate", currentDate);        
    appendDate(dataLic, currentDate);
});

function appendDate(dataLic, currentDate){
    if (dataLic > currentDate) {
        $(".licitatiiInactive").append(dataLic +"<br/>");
    } else {
        $(".licitatiiActive").append(dataLic+"<br/>");
    }   
}

見つかったバグとサンプルをオンラインで更新する

サンプルの日付を変更した後、バグを見つけるのは非常に簡単でした。各日付をループして $.eachいますが、値をコピーするコードはループの外にあります。コード ( my を参照function appendDate()) をループ内に配置すると、最後の値だけでなく、すべての値が処理されます。要素をコピーするための実用的なソリューションを見てください

于 2012-10-27T08:44:02.207 に答える
1

次のようにスクリプトを変更します。

    var fullDate = new Date();
    var twoDigitMonth = (fullDate.getMonth()+1)+"";
    if(twoDigitMonth.length==1) twoDigitMonth="0" +twoDigitMonth;
    var twoDigitDate = fullDate.getDate()+"";
    if(twoDigitDate.length==1)  twoDigitDate="0" +twoDigitDate;
    var currentDate = twoDigitDate + "." + twoDigitMonth + "." + fullDate.getFullYear();

    var dataLic;
    var infoP;

    $.each($("#receivedInfo p"), function () {
        var info = $(this).html();
        dataLic = info.split(' - ')[0].trim();
        infoP = "<p>" + info + "</p>";
        if (dataLic > currentDate) {
            $(".licitatiiInactive").append(infoP);
        } else {
            $(".licitatiiActive").append(infoP);
        }        
    });
于 2012-10-27T08:23:24.570 に答える
1

問題は、eachループの各パスが変数infoPを上書きし、完了するまで html を移動しようとしないことですeach。

代わりに、ループの各パス内で日付を確認し、新しい html 文字列を追加します。

EDIT 日付ロジックは、このコードが示すように 2 つの日付オブジェクトを比較することで簡素化およびクリーンアップできます。

デモ: http://jsfiddle.net/8ngA5/2/

var fullDate = new Date();

$("#receivedInfo p").each(function() {
    var info = $(this).html();
    var dataLic = $.trim(info.split(' - ')[0]).split('.');

    var d=new Date(parseInt( dataLic[2]), parseInt( dataLic[1]), parseInt( dataLic[0]))


    var infoP = "<p>" + info + "</p>";

    if (d < fullDate) {
        $(".licitatiiInactive").append(infoP);
    } else {
        $(".licitatiiActive").append(infoP);
    }

});
于 2012-10-27T08:20:52.560 に答える