如何在同一个 jQuery 函数中使用两个追加？

Question

我有一个 jQuery 搜索功能，我想在开始搜索时首先显示一个 HTML 块，显示标题“搜索结果”。然后我想在第一个块中添加另一个 ID 为“entitiesNav”的 HTML 块，并追加。这就是我尝试过的，但它没有用请问我该怎么办？

<div id="searchRes>

    <div class="media post-block m-b-xs-30" id="entitiesNav">

          </div>

    </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            var searchRequest = null;
            $("#search").keyup(function() {
                var minlength = 1;
                var that = this;
                var value = $(this).val();

                var searchResult = $("#searchRes").html('');
                var entitySelector = $("#entitiesNav").html('');
                if (value.length >= minlength ) {
                   searchResult.append('<section class="section-gap section-gap-top__with-text trending-stories" >' +
                        '<div class="container">\n' +
                        '            <div class="section-title m-b-xs-40">\n' +
                        '                <h2 class="axil-title">Search Result</h2>\n' +
                        '\n' +
                        '            </div>\n' +
                        '            <div class="row">\n' +
                        '            <div class="col-lg-6">'+'</div> <!-- End of .col-lg-6 -->\n' +
                       '\t\t\t\t\t</div>\n' +
                       '\t\t\t\t\t<!-- End of .row -->\n' +
                       '\t\t\t\t</div>\n' +
                       '\t\t\t\t<!-- End of .container -->\n' +
                       '\t\t\t</section>'

                   ) ;

                    if (searchRequest != null)
                        searchRequest.abort();
                    searchRequest = $.ajax({
                        type: "GET",
                        url: "{{ path('search_ajax') }}",
                        data: {
                            'q' : value
                        },
                        dataType: "text",
                        success: function(msg){
                            //we need to check if the value is the same
                            if (value===$(that).val()) {
                                var result = JSON.parse(msg);
                                $.each(result, function(key, arr) {
                                    $.each(arr, function(id, value) {
                                        if (key === 'articles') {
                                            if (id !== 'error') {
                                                console.log(value[1]);

                                                entitySelector.appendTo(searchResult).append('<a href="/show_article'+id+'">'+'<img class=" m-r-xs-30" src="'+value[0]+'" >'+'</a>'+'<h3 class="axil-post-title hover-line hover-line">'+value[1]+'</h3>');
                                            } else {
                                                entitySelector.append('<li class="errorLi">'+value+'</li>');
                                            }
                                        }
                                    });
                                });
                            }
                        }
                    });
                }

            });
        });
    </script>

Answer 1

我刚刚检查了您的代码。 jQuery append 可以随心所欲地工作，只是你的编码有一些逻辑错误。

您正在删除上面的元素，然后您尝试将元素放入已删除的元素中，该元素现在不存在。

您无需清空该 searchRes。