0

jqueryの関数で、長い文字列を分割しようとしています。分割すると、結果は配列になると思います。だから私は.eachを使って分割された文字列の値を取得しました。ただし、何も表示されていません。この構文の私のエラーはどこにありますか？

 function DisplayList(data) {
    $.each(data.split('|'), function (index, value) {
        $(".listDisplay").html('<p>' + value + '</p>');
    });
 };

値の代わりにインデックスを.html（）に入れると、配列内の要素の数が表示されます。[0]、[1]、[2]のようなものを表示するはずです...そうですか？

私が本当に望んでいるのは、分割された文字列の内容を段落形式で表示することです...（.listDisplayはdivです）

4

3 に答える 3

1

この線：

$(".listDisplay").html('<p>' + value + '</p>');

「.listDisplay」の内容を現在の。で上書きしますvalue。したがって、各反復は$.each()前の値を上書きし、$.each()終了すると「.listDisplay」はvalue最後の反復からのものを保持します。

次のように変更してみてください。

$(".listDisplay").append('<p>' + value + '</p>');

これにより、既存のコンテンツが上書きされるのではなく、「。listDisplay」の最後に新しい段落が追加されます。したがって、.each()は、によって返される配列内の各項目に新しい段落を追加しdata.split('|')ます。

（新しい段落を追加する前に、div内の既存のコンテンツをクリアするために、$(".listDisplay").empty()または$(".listDisplay").html("")その直前に追加することをお勧めします。）$.each()

別のアプローチは、$.each()：なしで1行でそれを行うことです。

function DisplayList(data) {
   $(".listDisplay").html('<p>' + data.replace(/\|/g, '</p><p>') + '</p>');
};
于 2012-05-25T01:57:09.987 に答える
0

最後の値のみが表示されます。

function DisplayList(data) {
    var html = '';
    $.each(data.split('|'), function (index, value) {
        html += '<p>' + value + '</p>';
    });

    $(".listDisplay").html(html);
};
于 2012-05-25T01:57:16.643 に答える
0

appendメソッドで通常のforループを使用するだけです...

var dataArr = data.split('|'),
    list = $(".listDisplay");

list.empty(); // This will clear the list first.
for (var i = 0, len = dataArr.length; i < len; i++) {
    list.append('<p>' + dataArr[i] + '</p>');
}
于 2012-05-25T01:58:50.937 に答える