javascript - 如何使用 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'));

Answer 1

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

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

唯一的问题是你的 select 验证有点不同，所以你可以检查 .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);