JQuery unable to get closest sibling

Question

I have this html that will be repeated a few times. I want the .Categories class to update the nearest sibling .Fields class when an ajax request has been completed. I have tried to use.find as well but none seem to work.

<div class="col-sm-12 row">
    <div class="col-sm-3 search-spacing">
        <label>Document Categories</label>
        @Html.DropDownListFor(m => m.CategoryId, (SelectList)Model.Categories, "Select Category", new { @class = "form-control Categories" })
    </div>
    <div class="col-sm-3 search-spacing">
        <label>Document Fields</label>
        @Html.DropDownListFor(m => m.FieldId, (SelectList)Model.DocumentFields, "Select Field", new { @class = "form-control Fields" })
    </div>
    <div class="col-sm-3 search-spacing">
        <label for="Data">Data</label>
        <input type="text" id="Data" placeholder="Search" />
    </div>
</div>

$("#datatable-search-input-container").on("change", ".Categories", function (e) {
    console.log("changed");
    selected = $(".Categories").find(":selected").val();
    var form_data = selected;
    refreshDropdown(form_data);
    return false;
});

function refreshDropdown(Input) {
    $.ajax({
            url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
            method: "POST",
            data: JSON.stringify(Input),
            contentType: "application/json",
            success: function (result) {
                var parent = $(this).closest(".search-spacing");
                parent.find(".Fields").empty();
                console.log(parent);
            },
            error: function (error) {
                console.log(error);
            }
        });
}

Answer 1

Try refreshDropdown.call(this, form_data) then this inside your refreshDropdown refers to the element the event was triggered for. Also cache it 'cause this changes in your ajax listeners .

$("#datatable-search-input-container").on("change", ".Categories", function (e) {
        console.log("changed");
        selected = $(".Categories").find(":selected").val();
        var form_data = selected;
        refreshDropdown.call(this, form_data);
        return false;
    });

    function refreshDropdown(Input) {
        var $element = $(this),
            $nextFields = $element.parent().nextSibling().children(".Fields");

        $.ajax({
                url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
                method: "POST",
                data: JSON.stringify(Input),
                contentType: "application/json",
                success: function (result) {
                    $nextFields.empty();
                    console.log(parent);
                },
                error: function (error) {
                    console.log(error);
                }
            });
    }

Answer 2

I would change your function to pass in the category input:

 $("#datatable-search-input-container").on("change", ".Categories", function (e) { console.log("changed"); var $thisCategory = $(this); refreshDropdown($thisCategory); return false; }); function refreshDropdown(Input) { var form_data = Input.find(":selected").val(); $.ajax({ url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())", method: "POST", data: JSON.stringify(form_data), contentType: "application/json", success: function (result) { var parent = Input.parent(); parent.next().find(".Fields").empty(); console.log(parent); }, error: function (error) { console.log(error); } }); }