JQuery获取最接近的元素并筛选子元素

JQuery getting the closest element and filtering children

本文关键字：元素 筛选 获取 最接近 JQuery      更新时间：2023-09-26

我有三个带有ID的表单（表单1、表单2、表单3）。每个表单都有自己不同的下拉列表（drop1、drop2）和提交按钮。当您在每个表单中单击提交按钮时。它检查选择了哪个选项（在同一表单的下拉列表中）。要找到准确选择的选项，我使用此代码：

    $(".submitButton").each(function(){
          $( this ).click(function(){buttonAddClicked(1)});
    });

    function buttonAddClicked(FormID){
          $('form'+ FormID +' *').filter('.MyDropDownList').each( function(){
           var selOption=$(this).find('option:selected');
    }

到目前为止一切都很好。我选择的选项没有任何问题。但是，当我做一些修改时，问题就会发生。

在文档准备好后，我复制form1.html。因此，form1与相同的id重复。

--假设我有表格1A，表格1B——

当我按下表格1A或表格1B中的提交按钮时，代码总是转到表格1A中的选定选项。这个问题正在折磨我。

如何修改代码以获取最接近表单的表单。我尝试了一些技巧，但没有奏效。问题在于将（'*'）与最接近的筛选器一起使用。或者，如果有另一个解决方案，我会非常感谢你们。非常感谢。

编辑：我可以很容易地获得最接近的表单，但如何在该表单上循环（每个）下拉列表，

问题是，对于所有的按钮点击，您都将1作为表单id传递。

没有必要这样做，假设按钮在表单中，则可以使用.closest（）查找包含按钮的表单，然后使用.find（）查找select元素，使用.val（）查找其选定值，如下所示

jQuery(function () {
    $(".submitButton").click(function () {
        var $form = $(this).closest('form');
        var selectedValue = $form.find('.MyDropDownList').val();
        //do whatever you want to do with the selectedvalue
        //if you have multiple elements and wants to have an array of values
        var selectedValues = $form.find('.MyDropDownList').map(function () {
            return $(this).val()
        }).get();
    });
})

首先，文档中不应该有重复的ID。它会导致辅助技术出现问题。因此，最好的解决方案是在复制表单时修改ID。

但是，您可以使用jQuery的closest来查找最近的父级http://api.jquery.com/closest/

function buttonAddClicked(){
    var selOption = $(this).closest('form').find('.MyDropDownList').val();
}
相关文章：