如何将元素附加到 JQuery 中的动态字段？

Question

在我的用例中，我希望在每次动态生成的迭代中将元素附加到相应的对象。它附加到所有对象的末尾。这是我的代码，

HTML：

<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
    <h5>Discussion Board</h5>
    <ol class="question_ol" >
        {{  if .ViewData.Questions }}
        {{ range .ViewData.Questions }}
            <li>
                <input type="hidden" id="question_id" class="question_id_val" value="{{.QuestionId}}"/>
                <div class="q-comment">
                    <div class="qanda questiondiv" id="questionarea" name="questionarea">
                        <div>
                            <div id="topic" class="upvote pull-left">
                                <a class="upvote"></a>
                                <span class="count">3</span>
                                <a class="downvote"></a>
                            </div>
                            <div >
                                <div class="qanda-info">
                                    <h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
                                </div>
                                <p id="quest_text">{{.QuestionText}}</p>
                            </div>
                        </div >
                        <div class="qanda-info">
                            <div class="user-info">
                                <img src="/resources/img/team-small-2.png" />
                            </div>
                            <h6>{{.UserId}}</h6>
                            <span class="date alt-font sub">{{.DateCreated}}</span>
                            <a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
                        </div>
                    </div>
                </div>
            </li><!--end of individual question-->

            {{ if .Answers }}
            <div class="form-input">
                    <label for="answers">{{len .Answers}} Answer(s)</label>
            </div>
                {{ range .Answers }}
                    <ul class="children">
                        <li>
                            <div class="q-comment">
                                <div class="qanda">
                                    <div>
                                        <div id="topic" class="upvote pull-left">
                                            <a class="upvote"></a>
                                            <span class="count">{{.Upvotes}}</span>
                                            <a class="downvote"></a>
                                        </div>
                                        <div >
                                        <p>{{.AnswerText}}</p>
                                        </div>
                                    </div>
                                    <div class="qanda-info">
                                        <div class="user-info">
                                            <img alt="User" src="/resources/img/team-small-4.png" />
                                        </div>
                                        <h6>{{.UserId}}</h6>
                                        <span class="date alt-font sub">{{.DateCreated}}</span>
                                    </div>
                                </div>
                            </div>
                        </li><!--end of individual comment-->
                    </ul>
                {{ end }}
            {{ end }}

         {{ end }}
        {{ end }}

    </ol>
</div><!--end of comments list-->

** 还有我的 JS 代码：**

$('.questiondiv').on('click', '.submitanswerbutton', function() {
    console.log("In submit button");
    date = "17 June 2015"
    var howtiId = $('#howti_id').text();
    var question_id = $(this).closest('li').find('.question_id_val').val();
        var answer_text = $('.answertext_val').val();
        console.log(howtiId);
        console.log(question_id);
        console.log(answer_text);
    $.getJSON("/submitanswer?howti_id="+howtiId+"&question_id="+question_id+"&answer="+answer_text, function(data) {
            console.log("answer Response "+data);
            newAnswer = "<ul class='children'><li><div class='q-comment'><div class='qanda'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>3</span><a class='downvote'></a></div><div><p>"+answer_text+"</p></div></div><div class='qanda-info'><div class='user-info'><img alt='User' src='/resources/img/team-small-4.png' /></div><h6>{{.UserId}}</h6><span class='date alt-font sub'>"+date+"</span></div></div></div></li></ul>"
            $('ol').append(newAnswer);
            //$(this).closest('.comment-list-new').find('.question_ol').append(newAnswer);
        });
    $(this).closest('.answersectiondiv').remove();
});

我正在尝试附加相应问题的答案。但它附加到最后一个问题。

有人可以帮我解决这个问题吗？

Answer 1

首先在 questions_ol div 下添加一个容器 div 以包含每个问题及其答案，给它类 question_and_answers，确保它在循环之下。

然后使用带有 $(this) 的 jquery 选择器来访问相关答案列表。代替： $("ol").append (... 采用： $(this).closest ('.question_and_answers ').append (...