html - 如何在 JQuery 中从父级访问另一个子类？

Question

我的标记看起来像：

 <div class="col-md-12 mainDiv">
    <div class="rowDiv"> <!--first row starts-->

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-skills">
                    <select class="dropdown-skills">
                        <option>Select Any</option>
                        <option value="S1">Skill 1</option>
                        <option value="S2">Skill 2</option>
                        <option value="S3">Skill 3</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-topics">
                    <select class="dropdown-topics">
                        <option>Select Any</option>
                        <option value="T1">Topic 1</option>
                        <option value="T2">Topic 2</option>
                        <option value="T3">Topic 3</option>
                    </select>
                </div>
            </div>
        </div>
        
    </div><!--first row ends-->

    <div class="rowDiv"> <!--second row starts-->

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-skills">
                    <select class="dropdown-skills">
                        <option>Select Any</option>
                        <option value="S1">Skill 1</option>
                        <option value="S2">Skill 2</option>
                        <option value="S3">Skill 3</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="a1">
            <div class="form-group">
                <div class="dropdown-container-topics">
                    <select class="dropdown-topics">
                        <option>Select Any</option>
                        <option value="T1">Topic 1</option>
                        <option value="T2">Topic 2</option>
                        <option value="T3">Topic 3</option>
                    </select>
                </div>
            </div>
        </div>
        
    </div><!--second row ends-->


</div>

我想要类似当我从第一行选择技能时它会更新第一行本身的主题。此外，当我从第二行中选择技能时，它会更新第二行中的主题，依此类推。我为此编写了脚本：

$('body').on('change', '.dropdown-skills', function(e) {
    $.ajax({
          type: "GET",
          url: 'getTopics/' + $(this).val(),
          dataType : "html",
          success: function(response)
          {
            $(this).closest('.rowDiv').find('.dropdown-container-topics').html(response);

          }
    });
});

即，当我更改类dropdown-skills时，它将从控制器函数获取主题为 html，然后将其输入到dropdown-container-topics当前行的类中。但这不起作用。怎么做到呢？

标签： htmljquery