jquery - 为什么我会收到 Uncaught TypeError : Object #<an HTMLSelectElement> has no method 'find' ?

Question

为什么我会得到:

Uncaught TypeError: Object # has no method 'find' (anonymous function):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 代码片段中使用 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>

我正在使用 Google Chrome(连同开发者工具)。

我在另一个线程中找到的解释是，当使用 Chrome 的开发人员工具时，会出现问题。但我在没有使用开发人员工具的情况下运行代码，并且发生了同样的情况(脚本没有执行任何操作 => 发生了错误)。

Answer 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，而是使用类。