jQuery ele.find() is not a function 错误的解决办法

Unsplash

这又是在项目过程中所遇到的一个问题,ele.find() is not a function,其中 HTML 代码如下所示:

<tr>
    <td><input type="hidden" name="good_id" value=""></td>
    <td><input type="checkbox" name="product_id" value=""></td>
    <td>商品名</td>
    <td>商品价格</td>
    <td>商品数量</td>
</tr>

这是为表格的某一行,每一行代表一种商品,有多行,当我们勾选某一行商品时,通过获取该行商品的 ID 来获取该行的所有数据,代码如下所示:

var good_id = checked[i].closest('tr').find('input[name=good_id]').val();

其中,checked 为勾选选项构成的数组,通过 closest() 方法从元素本身开始,逐级向上级元素匹配 tr 元素,查找来获取整行的数据,进而通过 find() 方法来获取该行的商品 ID

然而,该行代码却报错了,其实原因也很简单,checked[i].closest('tr') 返回的是一个 JS 对象,而 find() 函数则是属于 jQuery 对象的,所以只需要通过 $() 将其包装在其中,转换为 jQuery 对象,也可以通过使用 $(this) 来指代当前元素

// 方法一
var good_id = $(checked[i].closest('tr')).find('input[name=good_id]').val();
// 方法二
var good_id = $(this).closest('tr').find('input[name=good_id]').val();
End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SHERlocked93的前端小站

Vue源码阅读 - 文件结构与运行机制

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在...

1243
来自专栏偏前端工程师的驿站

前端构建:Less入了个门

一、前言                                说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scs...

1937
来自专栏前端知识分享

第187天:js基础---常见的Bom对象

BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统...

1142
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

5217
来自专栏Modeng的专栏

Vue2.5笔记:Vue的实例与生命周期

理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们...

882
来自专栏deepcc

jQuery(function($){...})与(function($){...})(jQuery)知识点分享

3586
来自专栏salesforce零基础学习

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex...

1420
来自专栏抠抠空间

JavaScript之BOM

一、什么是BOM? BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。 二、Wind...

3325
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

4.6K6
来自专栏C#

解析.NET对象的跨应用程序域访问(下篇)

    转眼就到了元宵节,匆匆忙忙的脚步是我们在为生活奋斗的写照,新的一年,我们应该努力让自己有不一样的生活和追求。生命不息,奋斗不止。在上篇博文中主要介...

2226

扫码关注云+社区

领取腾讯云代金券