Firefox で FireQuery を使用しています。これが私がやろうとしていることです:
- ページのどこかのタグ内に「Items Ordered」というテキストがあります。
- 「Items Ordered」テキストが存在するテーブルも、他のいくつかのテーブル内に深くネストされています。
上記のシナリオを考えると<table>、前述の文字列に最も近いタグを取得し、そこに div を追加します。正しい DOM 要素を確実に取得するための私の標準的な方法は、背景色を変更し、1 ピクセルの境界線を付けて、ページ上で飛び出して簡単に識別できるようにすることです。ただし、私のコードでは失敗しました。そのため、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>
使用する
- Firefox 20
- Windows Vista ビジネス 32 ビット SP2
- ファイアーバグ
- ファイアクエリ
- Google CDN がホストする jQuery
私が見つけたことと、なぜそれが不十分だったのか
A) コンフリクトなし
「エラーではありません」機能に関する多くの投稿は、投稿者が「jQuery」の代わりに「$」を使用していることを示しており、この投稿のように競合モードを設定しないことと関係があります。jQuery の実装方法は FireQuery の「jQueryify」関数によるものであるため、メッセージは似ていますが、これが私の問題とは関係がないと思います。また、「$」の代わりに「jQuery」をすでに使用しています。
B) jQuery のバージョンの問題
また、問題が jQuery のバージョンに関連している可能性があるのではないかと疑い始めました。この記事を書いている時点で、バージョン 2.0.0 は 3 日前 (2013 年 4 月 18 日) にリリースされたばかりで、バージョン 1.9.0 は以前のバージョンとは大きく異なることが既に知られています (いくつかの一般的な機能の廃止を含む)。以前のバージョンの jQuery は、手動または移行ツールを使用して再加工する必要がある場合があります。
結果
そこで、KOMODO IDE 6.1.3 でコードをテストして、FireQuery が jQuerify を実装する方法に関する問題を排除しました。私は 3 つの一般的なバージョンの 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
「テーブル」を返すので、実際にhtml要素があることがわかります。
次に、テーブル要素が匿名（IDまたは名前なし）であるため、問題の原因であると考えましたか？ターゲットタグを div でラップしようとしたことを解決するには、次のようにします。
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
ただし、同じ「関数ではない」エラーのみが返されましたが、今回は wrap() メソッドを参照しています。「wrap()」が有効な jQuery 関数であることを確認しました。
D) その他の考え
This postは、「Not a Function」エラーの Chrome のバージョンは「Uncaught TypeError」エラーであると述べています。考えられる原因として、同じページに jQuery の複数のインスタンスがあることが示唆されています。繰り返しますが、これは noConflict と関係があります。これが私に当てはまるかどうかは正確にはわかりませんが、「ない」傾向にあります。
私が思いつくことができる唯一の他のことは、おそらく問題は、jQuery オブジェクト、DOM オブジェクト、および JavaScript オブジェクト間の不一致と差異、および差異と関係があるということですか?
これを投稿し始める過程で、関連する可能性のあるこのjQueryの投稿を見つけましたが、理解できません。いくつかのプラグインまたはパッケージの実装を推奨しているようです -- これが単に自分のコードを宣伝しようとしている人なのか、それとも実際の「ベスト プラクティス」で受け入れられたモジュールなのかをどのように判断できますか?