我在Firefox中使用FireQuery。这是我想要做的:
鉴于上述情况,我想抓住最接近上述字符串的<table>
标记,并为其附加一个div。我确保获取正确DOM元素的标准方法是更改背景颜色并为其提供1px边框,以便弹出并在页面上轻松辨别。但是,我的代码失败了。所以,我试图理解它为什么失败以及如何在继续追加div之前修复它。
以下是我用于测试的代码:
<!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>
<小时/>
“不是错误”功能上的很多帖子表明海报使用“$”而不是“jQuery”,并且与this post中没有设置冲突模式有关。我不相信这与我的问题有任何关系,虽然消息类似,因为我实现jQuery的方式来自FireQuery的“jQueryify”函数。另外,我已经在使用“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)
在我的代码中,我扔了一些东西来返回对象的类型。这是我用过的:
// report element type
var elementType = target.tagName.toLowerCase();
alert(elementType); // table
它返回“table”,所以我知道我确实有一个html元素。
然后我想,因为表元素是匿名的(没有id或名称),导致问题的原因是什么?为了解决这个问题,我尝试将目标标签包装在div中:
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
但是,它只返回相同的“非函数”错误,但这次引用了wrap()方法。我验证了"wrap()" is INDEED a valid jQuery function。
This post提到Chrome版本的“Not a Function”错误是“Uncaught TypeError”错误。它建议在同一页面上有多个jQuery实例作为可能的原因。同样,这与noConflict有关,我不确定这是否适用于我,尽管我倾向于'不'。
我能想到的另一件事是,问题可能与jQuery对象,DOM对象和JavaScript对象之间的差异和差异以及差异有关吗?
在开始发布此过程中,我发现this jQuery post可能是相关的,但我无法理解。它似乎建议实现一些插件或包 - 我如何判断这是否只是某人试图推广他们的代码,或者它是否是一个真正的“最佳实践”,被接受的模块?
答案 0 :(得分:1)
我想抓住最接近前面提到的字符串的标记,并在其上附加一个div。
试试这个 -
$("b:contains('Items Ordered')").closest('table').wrap("<div id='target_wrap' />");