为什么我收到 Uncaught TypeError: Object #<an HTMLSelectElement> has no method 'find'？答案

【问题标题】：Why am I getting Uncaught TypeError: Object #<an HTMLSelectElement> has no method 'find'?为什么我收到 Uncaught TypeError: Object #<an HTMLSelectElement> has no method 'find'？
【发布时间】：2011-05-21 14:01:56
【问题描述】：

我为什么会得到：

Uncaught TypeError: Object # has no method “找到”（匿名功能）：8080/twolittlesheep/js/sizeColorDependancy.js:16 c.event.handleajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:63 c.event.add.h.handle.oajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:56

当我尝试运行一个简单的 jQuery 脚本时？该脚本位于我在下一个 jquery 代码 sn-p 中使用 find 方法的那一行：

$(document).ready(function(){
  $("select#p_sizesId").change(function(){
   var $colorsSelect = $("select#p_colorsId")[0];
   $("select#p_colorsId")[0].find('option').remove().end().append('<option selected="selected" value="whatever">text</option>');
  });
});

在我的 html 中的 head 标签中：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> --%>
<script type="text/javascript" src="js/sizeColorDependancy.js"></script>

我正在使用谷歌浏览器（连同开发者工具）。

我在另一个线程中发现的所有解释是，当使用 Chrome 的开发人员工具时，问题出现了。但是我在没有使用开发者工具的情况下运行代码并且发生了同样的事情（脚本没有做任何事情=>发生错误）。

【问题讨论】：

你为什么使用 [0]？因为这个元素有一个 id，所以不会有一个集合可以迭代...
@ToonMariner - 当我调试时，我看到 DOM 选择对象在一个数组中，所以我错误地认为我需要从数组中获取第一个对象...

标签： jquery google-chrome typeerror methodnotfound

【解决方案1】：

当您执行[0] 时，您将从选择器匹配的第一个元素作为 DOM 元素，而不是具有 .find() 的 jQuery 对象，只需删除 [0]，就像这样：

$(document).ready(function(){
  $("#p_sizesId").change(function(){
   $("#p_colorsId").find('option').remove().end().append('<option selected="selected" value="whatever">text</option>');
  });
});

其他一些注意事项，当使用#id 选择器时，除非绝对需要，否则不要为其添加前缀，这会减慢速度。此外，由于 ID 的 应该是唯一的，因此应该不需要获取第一个元素。选择器应该只匹配 1 或 0 个元素。如果它们不是唯一的，则不要使用ID，而是使用类。

【讨论】：

这解决了问题！但是考虑一下您有多个具有相同 id 的选择元素的情况。比什么？而且我认为 JQuery 对象和 javascript 对象将是相同的。我将如何转换 javascript 变量： var x = $("select#p_colorsId")[0];到一个 jQuery 对象？
@user521754 - 这是答案的后半部分 - 你应该从不在一个页面中有两个具有相同 ID 的元素，此时你需要使用类。 ..很多事情都取决于 ID 的唯一性。
关于同一个 id 的问题是假设性的（我从不使用这样的元素 id）。对于我问你的另一个子问题，你能否提供一个链接，让我可以阅读更多关于 jQuery 对象的信息，也许还有一些关于从 js 对象到 jQuery 对象的转换？
@user521754 - 我认为您所追求的是一般选择器中的第一个，您可以使用 .first() 或 .eq(0) 将第一个元素仍然作为 jQuery 对象...你问的是这个吗？

【解决方案2】：

只要把它变成这样的 jQuery 对象：

$($("select#p_colorsId")[0]).find('option')

【讨论】：