Question

在下面的代码中，我使用div，在新javascript对象中为多个项目克隆它，用标题填充每个克隆并发布，然后清除第一个父项。解析后console.log(message.length)返回4.所以我希望循环迭代4次，留下4个div的标题和帖子。但是，此代码返回1＃div;＆＃34; first note＆＃34;和＆＃34;测试消息...＆＃34;，＆＃34;第二次测试＆＃34;的2个div。并且＆＃34;更多......＆＃34;，4个＆＃34;第三个测试＆＃34;和＆＃34;更多......＆＃34;和8个div＆＃34;第四个测试＆＃34;和更多......＆＃34;。我错过了什么？

这是存储在消息对象中的内容

message = [{"date": "Sat, 15 Oct 2016 14:47:00 GMT", "id": 5, "post": "test message for the body of the post", "title": "first note"},
{"date": "Sat, 15 Oct 2016 15:20:06 GMT", "id": 6, "post": "some more text for a new test post", "title": "second test"},
{"date": "Mon, 17 Oct 2016 13:24:05 GMT", "id": 7, "post": "some more text", "title": "third test"},
{"date": "Mon, 17 Oct 2016 13:28:09 GMT", "id": 8, "post": "even more text to add", "title": "fourth test"}]

这是来自userhome.js

        else {
            var noteObj = JSON.parse(message);
            var note = null;

            $.each(noteObj, function (index, value) {
                note = $(".list-group").clone();
                $(note).find("h4").text(value.title);
                $(note).find("p").text(value.post);
                $(".jumbotron").append(note);
            });

            $(".list-group:first").empty();

            //print success message to console
            console.log("successfully retrieved notes");
        }

这是来自userhome.html

<div class="jumbotron">
        <h1>welcome!</h1>
        <div class="list-group">
            <a href="#" class="list-group-item active">
                <!--start dynamic section-->
                    <h4 class="list-group-item-heading"></h4>
                    <p class="list-group-item-text"></p>
                <!--end dynamic section-->
            </a>
        </div>
    </div>

Answer 1

当您致电$(".list-group").clone()时，您将在每次迭代时克隆整个列表。因此，您在第一次迭代时获得1个克隆，在第二次迭代时获得2个克隆，在第三次迭代时获得4个克隆等。然后，您可以更改所有克隆的标题和帖子，然后将所有克隆添加到jumbotron。因此，更具体的选择。例如，您可以使用$(".list-group").first().clone()。

Answer 2

每个循环都克隆整个列表。这就是你得到的原因，1,2,4,8 ...

您只想克隆列表的第一项。

在您的代码中更改此行：

note = $(".list-group").clone();

为：

note = $(".list-group").first().clone();

这将解决它。

每次调用$(note)时，您都不需要使用note，因为note本身已经是$ jQuery元素。你可以拥有这个：

note.find("h4").text(value.title);
note.find("p").text(value.post);

最佳做法是在引用jQuery元素时使用$符号，因此最终的代码将是这样的：

    else {
        var noteObj = JSON.parse(message);
        var $note = null;

        $.each(noteObj, function (index, value) {
            $note = $(".list-group").clone();
            $note.find("h4").text(value.title);
            $note.find("p").text(value.post);
            $(".jumbotron").append(note);
        });

        $(".list-group:first").empty();

        //print success message to console
        console.log("successfully retrieved notes");
    }

jQuery each（）循环迭代超过预期

2 个答案: