JQuery对象与Dom对象初次入坑_length is not a function-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_14908027/article/details/78657216

本文介绍了解决在API用例管理中使用JQuery的.val()方法为动态生成的input元素赋值时遇到的问题。通过将DOM对象转换为JQuery对象或直接使用DOM的value属性，成功实现了参数赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先感谢前端大佬对自己的指点
问题背景：测试平台在做api用例管理的时候，有对api的编辑功能，用户点击编辑打开的编辑页面中有动态的根据api的参数的数量生成input输入框并进行赋值，然后博主在使用JQuery赋值函数.val()的时候发现前端报错 inputs[i].val is not a function，下面进行分析
下图是截取的api表格中的，可以看到这里有两个请求参数 phone 和action
这里写图片描述

用户点击编辑后的实现效果如下图
这里写图片描述
这部分的处理代码如下

let params = [];
params = para.split(',');
//console.log(params);
for (let i=0;i<params.length;i++){
    add_params();
    setTimeout(function () {
        let inputs = $('#paramsgroup > input');
        //console.log(inputs[i], typeof inputs[i]);
        $(inputs[i]).val((params[i]))
    },10)

}

这里博主在调试的时候打印了inputs[i]和他的类型，确实没有问题，然后使用以下代码进行input赋值的时候就出现了错误提示

inputs[i].val((params[i]))

这个是因为通过定位获取到的inputs对象组就是dom对象，inputs[i]当然也是dom对象，是没有val()函数的，必须使用美元符号转成JQuery对象之后就成功实现了效果，为了对比，我们使用dom对象的value属性

let params = [];
params = para.split(',');
 //console.log(params);
 for (let i=0;i<params.length;i++){
     add_params();
     setTimeout(function () {
         let inputs = $('#paramsgroup > input');
         //console.log(inputs[i], typeof inputs[i]);
         //$(inputs[i]).val((params[i]))
         inputs[i].value = params[i]
     },10)

 }