Question

在我的jquery函数中，我尝试分割一个长字符串。我认为在拆分时，结果是一个数组。所以我用.each来获取splitted string的值。但是，它没有显示任何东西。这句话中我的错误在哪里：

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

当我将index放在.html（）而不是value中时，我会看到数组中元素的数量。它应该显示像[0]，[1]，[2] ......对吗？

我真正想要的是在段落中显示我的分割字符串的内容......（。listDisplay是div）

Answer 1

该行：

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

使用当前value覆盖“.listDisplay”的内容。因此，$.each()的每次迭代都会覆盖先前的值，然后当$.each()完成时，“。listDisplay”将覆盖最后一次迭代中的value。

尝试将其更改为：

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

这将在“.listDisplay”的末尾添加一个新段落，而不是覆盖现有内容。因此，.each()会为data.split('|')返回的数组中的每个项目添加一个新段落。

（您可能希望在$(".listDisplay").empty()之前添加$(".listDisplay").html("")或$.each()，以便在添加新段落之前清除div中的所有现有内容。）

另一种方法是在没有$.each()的情况下在一行中执行：

function DisplayList(data) {
   $(".listDisplay").html('<p>' + data.replace(/\|/g, '</p><p>') + '</p>');
};

Answer 2

这只会显示最后一个值。

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

    $(".listDisplay").html(html);
};

Answer 3

只需使用附加方法的常规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>');
}

每个jquery问题

3 个答案: