使用javascript / Jquery在ajax調用上替換div

Question

我需要一些幫助，以便將div中的某些html替換為在進行Ajax調用時從服務器獲取的其他html。

為了讓大家清楚，我有以下代碼：

碼：

<div class="travel-container" id="travel-container">
    <div class="travel-content">

        @using (Html.BeginForm(new { id = "sbw_travel_form" }))
        {
            <div class="row">
                <div class="routes small-12 large-6 column">
                    @Html.Label("Departure Route:", new { @class = "label-travel" })
                    @Html.DropDownListFor(m => m.DepartureRoute, routesSelectList, new { @class = "dropdown", @id = "Outbound-route" })

                    @Html.Label("Return Route:", new { @class = "label-travel" })
                    @Html.DropDownListFor(m => m.ReturnRoute, routesConverslySelectList, new { @class = "dropdown", @id = "Return-route" })
                </div>

                <div class="dates small-12 large-3 column">
                    @Html.Label("Departure Date:", new { @class = "label-travel" })
                    @Html.TextBoxFor(m => m.DepartureDate, new { Value = Model.DepartureDate.ToShortDateString(), @class = "textbox datepicker ll-skin-melon", @id = "departureDate" })

                    @Html.Label("Return Date:", new { @class = "label-travel" })
                    @Html.TextBoxFor(m => m.ReturnDate, new { Value = Model.ReturnDate.ToShortDateString(), @class = "textbox datepicker ll-skin-melon", @id = "returnDate" })
                </div>

                <div class="small-12 medium-6 large-3 columns"></div>
            </div>
        }
    </div>
</div>

在這里，您看到我已將所有內容放入一個名為travel-container的類容器中。

我想做的是，當我從服務器獲取新的html時，用一些相同的div標記將div替換為“ routes”類。 問題是我需要將其余的html保留在容器內。

Ajax調用代碼：

$.ajax({
            type: 'POST',
            url: "@Url.Action("FindReturnRoutes", "Travel")",
            dataType: "html",
            data: postData,
            beforeSend: function () {
                $(".travel-content").append(res.loader);
                setTimeout(delay);
            },

            success: function (data) {
                setTimeout(function () {
                    $(".travel-content").find(res.loader).remove();
                    $('.travel-container').html($(data).find(".travel-content"));
                    datepickerLoad();
                    Initializer();
                }, delay);
            }
        });

現在，我正在使用find方法來查找travel-content div並替換該div中的所有內容。 曾嘗試單獨放置.routes，但是似乎沒有任何作用。 在這里找到合適的解決方案嗎？

我只想用從ajax調用中獲得的新路由替換div，但仍然保留其余的html，而不是全部替換。

Answer 1

以下代碼段可能對您有所幫助。

$('.travel-container .routes').prepend($(data).find('.routes').html());

Answer 2

你可以試試這個嗎：

$('.travel-container .travelcontent').html(data);