如何在jQuery中遍历对象并触发表单选择框处理函数？

问题 #

我编写了如下函数，可根据选择框（select）的值显示或隐藏字段的输入框与标签：

function handle_select_change(obj) {
        var selectField = jQuery(obj);
        var selectedValue = selectField.val();
        var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');


        if (selectedValue !== "multiple-choice") {
            textareaField.css("display", "none");
            textareaField.siblings().css("display", "none");

        } else {
            textareaField.val(""); 
            textareaField.css("display", "block");
            textareaField.siblings().css("display", "block");
        }   
        
    }

该函数适用于页面中的多个表单。我希望在文档就绪时触发此函数，以校验每个表单中选择框的当前值。
我原本在文档就绪函数中这样调用：

handle_select_change(jQuery('.cheryr-ui-repeater-content-box select'));

上述选择器返回的是一个jQuery对象，其中每个索引对应一个表单的选择框（比如5个表单就会返回长度为5的对象）。请问如何遍历该对象，将每个选择框分别传入函数触发执行？

解决方案 #

使用jQuery的.each()方法遍历选择器返回的集合，将每个选择框DOM元素单独传入函数执行：

jQuery(document).ready(function() {
    jQuery('.cheryr-ui-repeater-content-box select').each(function() {
        handle_select_change(this);
    });
});

说明 #

• .each()会遍历jQuery集合内的每一个元素，迭代时this指向当前的单个选择框DOM元素，和函数通过事件触发时接收的参数格式一致，能直接被函数处理。
• 这种方式可以确保每个选择框都被单独校验，触发对应的显示/隐藏逻辑。

可选优化：简化原函数 #

可以对原函数做一些简洁性和性能优化，让代码更高效：

function handle_select_change(obj) {
    var selectField = jQuery(obj);
    var selectedValue = selectField.val();
    // 用closest()替代parents()，只查找最近的匹配父元素，性能更优
    var textareaField = selectField.closest('.cheryr-ui-repeater-content-box').find('textarea');

    if (selectedValue !== "multiple-choice") {
        // 合并textarea和兄弟元素，统一调用hide()
        textareaField.add(textareaField.siblings()).hide();
    } else {
        // 清空值后统一调用show()
        textareaField.val("").add(textareaField.siblings()).show();
    }   
}

优化点：

1. 用.closest()替代.parents()，减少DOM遍历层级，提升性能。
2. 使用jQuery内置的.hide()、.show()方法替代直接操作display样式，代码更简洁。
3. 用.add()合并元素集合，减少重复操作。

内容的提问来源于stack exchange，提问作者tukitooo1998