【发布时间】：2013-04-21 22:08:57
【问题描述】：
我在 Firefox 中使用 FireQuery。这是我想要做的：
- “已订购商品”文本存在于某处的标签中 页面。
- “Items Ordered”文本所在的表格也嵌套在其他几个表格的深处。
鉴于上述情况，我想获取最接近上述字符串的<table> 标签，并在其上附加一个 div。我确保抓取正确 DOM 元素的标准方法是更改背景颜色并为其设置 1px 边框，以便它弹出并在页面上易于识别。但是，我的代码失败了。所以，在继续追加 div 之前，我试图了解它失败的原因以及如何修复它。
以下是我用于测试的代码：
[HTML -- 实际代码，带有替代的个人信息和链接]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 2013.04.20 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('div').css({
'border':'solid green 2px'
})
var elems_arr = jQuery('table:contains(Items Ordered)')
console.info('elems_arr:');
console.log(elems_arr);
console.info("elems_arr.length = " + elems_arr.length);
target = elems_arr[elems_arr.length - 1]
console.warn("target:");
console.log(target);
var elementType = target.tagName.toLowerCase();
alert(elementType);
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
});
</script>
<style type='text/css'>
table {
border: solid blue 1px;
min-height: 30px;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr bgcolor="#FFFFFF">
<td valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr bgcolor="#FFFFFF">
<td>
<center>
<b class="sans">Shipping Soon</b>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr valign="top">
<td width="100%">
<table border="0" cellspacing="0" cellpadding="2" align="right">
<tbody>
<tr valign="top">
<td align="right"> </td>
</tr>
</tbody>
</table><input type="hidden" name="qmsjtomutmooy" value="1">
<table border="0" cellspacing="2" cellpadding="0" width="100%">
<tbody>
<tr valign="top">
<td valign="top"><b>Items Ordered</b></td>
<td align="right" valign="top"><b>Price</b></td>
</tr>
<tr>
<td colspan="1" valign="top">1 of: <i>SET OF 3 NAIL FILES AT INTRODUCTION PRICE!!! Premium Manicure Crystal Glass Nail Files Nail File By Cheeky. Menicure / Pedicure Set of 3 Crystal Nail</i><br>
<span class="tiny">Condition: New<br>
Sold by: Cheeky-Beauty (<a href="#">seller profile</a>)<br></span></td>
<td align="right" valign="top" colspan="2">$8.99<br></td>
</tr>
</tbody>
</table><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="top" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td>
<b>Shipping Address:</b><br>
<div class="displayAddressDiv">
<ul class="displayAddressUL">
<li class="displayAddressLI displayAddressFullName">MY NAME</li>
<li class="displayAddressLI displayAddressAddressLine1">123 Sesame St.</li>
<li class="displayAddressLI displayAddressCityStateOrRegionPostalCode">Beverly Hills, CA 90210</li>
<li class="displayAddressLI displayAddressCountryName">United States</li>
</ul>
</div><br>
<b>Shipping Speed:</b><br>
Two-Day Shipping<br>
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr valign="top">
<td nowrap="nowrap" align="right">Item(s) Subtotal:</td>
<td nowrap="nowrap" align="right">$8.99</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right">Shipping & Handling:</td>
<td nowrap="nowrap" align="right">$0.00</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"> </td>
<td nowrap="nowrap" align="right">-----</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right">Total before tax:</td>
<td nowrap="nowrap" align="right">$8.99</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right">Sales Tax:</td>
<td nowrap="nowrap" align="right">$0.00</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"> </td>
<td nowrap="nowrap" align="right">-----</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"><b>Total for This Shipment:</b></td>
<td nowrap="nowrap" align="right"><b>$8.99</b></td>
</tr>
<tr valign="top">
<td nowrap="nowrap" align="right"> </td>
<td nowrap="nowrap" align="right">-----</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
使用
- 火狐20
- Windows Vista Business 32 位 SP2
- 萤火虫
- 火查询
- Google CDN 托管的 jQuery
我发现了什么以及为什么它不够
A) 没有冲突
许多关于“不是错误”功能的帖子表明发布者使用的是“$”而不是“jQuery”，并且与设置无冲突模式有关，如this post。我不相信这与我的问题有任何关系，尽管消息是相似的，因为我实现 jQuery 的方式来自 FireQuery 的“jQueryify”函数。另外，我已经在使用“jQuery”而不是“$”。
B) jQuery 版本问题
我也开始怀疑这个问题可能与 jQuery 版本有关。在撰写本文时，2.0.0 版刚刚在 3 天前（2013 年 4 月 18 日）发布，并且已知 1.9.0 版与之前的版本有很大不同（包括弃用了几个流行的函数），因此任何使用以前的 jQuery 版本可能需要手动修改或使用Migrate tool。
结果
因此，我使用 KOMODO IDE 6.1.3 测试了我的代码，以消除 FireQuery 如何实现 jQuerify 的任何问题。我使用了三个流行的 jQuery 版本；以下是我的跨浏览器测试结果：
* Chrome 26.0.1410.64 m
- jQuery 1.5.1
Uncaught TypeError: Object #<HTMLTableElement> has no method 'wrap' codeTest_jQuery_2013.04.20_01.php:28
(anonymous function) codeTest_jQuery_2013.04.20_01.php:28
f.resolveWith jquery.min.js:16
d.extend.ready jquery.min.js:16
c.addEventListener.A jquery.min.js:16
- jQuery 1.7.1
Uncaught TypeError: Object #<HTMLTableElement> has no method 'wrap' codeTest_jQuery_2013.04.20_01.php:28
(anonymous function) codeTest_jQuery_2013.04.20_01.php:28
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B jquery.min.js:2
- jQuery 1.9.1
Uncaught TypeError: Object #<HTMLTableElement> has no method 'wrap' codeTest_jQuery_2013.04.20_01.php:28
(anonymous function) codeTest_jQuery_2013.04.20_01.php:28
c jquery.min.js:3
p.fireWith jquery.min.js:3
b.extend.ready jquery.min.js:3
H jquery.min.js:3
* Firefox 20.0.1
- jQuery 1.5.1
TypeError: target.css is not a function
http://localhost/codeTest_jQuery_2013.04.20_01.php
Line 30
- jQuery 1.7.1
(same error)
- jQuery 1.9.1
(same error)
* Internet Explorer 8.06
- jQuery 1.5.1
Object doesn't support this property or method
codeTest_jQuery_2013.04.20_01.php, line 28 character 17
- jQuery 1.7.1
(same error)
- jQuery 1.9.1
(same error)
C) 用 div 包裹目标元素
在我的代码中，我添加了一些东西来返回对象的类型。这是我用的：
// report element type
var elementType = target.tagName.toLowerCase();
alert(elementType); // table
它返回“table”，所以我知道我确实有一个 html 元素。
然后我想可能是因为 table 元素是匿名的（没有 id 或 name），这就是导致问题的原因？为了解决这个问题，我试图将目标标签包装在一个 div 中：
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
但是，它只返回了相同的“不是函数”错误，但这次引用了 wrap() 方法。我验证了"wrap()" is INDEED a valid jQuery function。
D) 其他想法
This post 提到 Chrome 版本的“Not a Function”错误是“Uncaught TypeError”错误。它建议在同一页面上出现多个 jQuery 实例作为可能的原因。同样，这与 noConflict 有关，我不确定这是否适用于我，尽管我倾向于“不”。
我唯一能想到的另一件事是，这个问题可能与 jQuery 对象、DOM 对象和 JavaScript 对象之间的差异、差异和差异有关？
在开始发帖的过程中，我发现this jQuery post可能是相关的，但我无法理解。它似乎建议实现一些插件或包 - 我如何判断这是否只是有人试图推广他们的代码，或者它是否是一个实际的、“最佳实践”、被接受的模块？
【问题讨论】：
-
+1（如果可以的话，我会提供更多）以获得详细的问题和环境描述，彻底的“你尝试过什么”部分并提供对你所研究内容的参考。欢迎使用 StackOverflow！
-
感谢@cryoxx！我试图做到彻底
标签： jquery firebug typeerror uncaught-exception