如何使用find()优化jQuery代码？

Question

我有一个表单，其id="test"。在表单中，我有一些select、input和textarea字段。

我想遍历每个字段并检查它们是否为空，然后对它们进行某些操作。

var editTest= $('#test');

editGeneric(editTest);

var editGeneric= function(form){
    form.children().find('select').each(
        function(){
            var values = $(this).val();
            if(values === 'select one' || values === 'Select One' || values == 0 || values == 99){
                $(this).css('border', '1px solid red');
            }
        }
    );

    form.children().find('input').each(
        function(){
            var values = $(this).val();
            if(values === ''){
                $(this).css('border', '1px solid red');
            }
        }
    );

    form.children().find('textarea').each(
        function(){
            var values = $(this).val();
            if(values === ''){
                $(this).css('border', '1px solid red');
            }
        }
    );
}

这段代码实现了我需要的功能，但你可以看到我重复了几次。

如何简化这段代码，以便我可以在其他表单中使用它？

有什么想法吗？谢谢。

编辑：谢谢大家。

我把代码改为：

var editGeneric= function(form){

    form.children().find(':input').each( function(){
            var values = $(this).val();

            if ($(this).is('select')){
                if(values === 'select one' || values === 'Select One' || values == 0){
                    $(this).css('border', '1px solid red');
                }
            }
            if ($(this).is('input') || $(this).is('textarea')){
                if(values === ''){
                    $(this).css('border', '1px solid red');
                }
            }
        }
    );

}

editGeneric($('test'));

- Patrioticcow

---

你为什么要使用 form.children().find('...') 而不是直接使用 form.find('...')？你想排除表单顶部的一些项目吗？ - Samuel Caillerie

Answer 1

您可以使用jQuery的:input选择器，它选择输入框、下拉框和文本域。

form.children().find(':input').each( ...

唯一的问题在于您的验证有所不同，因此您可以检查.is('select')以更改条件：if (($(this).is('select') && (values === 'select one' || values === 'Select One' || values == 0 || values == 99) || !$(this).is('select') && values === '')) || !$(this).is('select') && values === '') { 您也不必使用form.children.find().. 您可以直接使用$("#test :input")或$(":input", form);

- Explosion Pills

Answer 2

只需将选择器组合：

form.children().find('select,input,textarea').each(function(){
        if(!$(this).val()){
            $(this).css('border', '1px solid red');
        }
    }
);

然后修改您的<select>，使任何无效选项都具有空或零值属性，而不是“选择一个”或99。

- Blazemonger

---

那里只是没有处理选择（带有默认值）的额外条件，对吧？ - Samuel Caillerie

是的，但这些默认值没有理由等于“选择一个”，因为它们同样可以等于空字符串。如果您无法提交带有该选项选定的表单，则该值是什么并不重要。 - Blazemonger

我应该如何处理这种情况下的 select？ - Patrioticcow

更新<option>标签，以便任何您不想选择的选项都具有value =“”。 - Blazemonger