Я использую FireQuery в Firefox. Вот что я пытаюсь сделать:
- Текст «Заказаны товары» существует в теге где-то на странице.
- Таблица, в которой существует текст «Заказаны товары», также глубоко вложена в несколько других таблиц.
Учитывая приведенный выше сценарий, я хочу взять тег <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>
С использованием
- Фаерфокс 20
- Windows Vista Business 32-разрядная версия с пакетом обновления 2 (SP2)
- поджигатель
- Firequery
- jQuery, размещенный на Google CDN
Что я нашел и почему этого было недостаточно
А) Нет конфликта
Многие сообщения о функции «это не ошибка» указывают на то, что автор использует «$» вместо «jQuery» и связаны с установкой режима отсутствия конфликта, как в этот пост. Я не верю, что это имеет какое-то отношение к моей проблеме, хотя сообщение похоже, потому что я реализую jQuery из функции FireQuery "jQueryify". Кроме того, я уже использую «jQuery» вместо «$».
B) проблемы с версиями jQuery
Я также начал подозревать, что проблема может быть связана с версиями jQuery. На момент написания этой статьи версия 2.0.0 была выпущена всего 3 дня назад (18 апреля 2013 г.), а уже известно, что версия 1.9.0 значительно отличается от предыдущих версий (включая устаревшие несколько популярных функций), так что любой код, использующий предыдущие версии jQuery, возможно, потребуется переработать либо вручную, либо с помощью Инструмент переноса.
Результаты
Итак, я протестировал свой код с 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
Он возвращает «таблицу», поэтому я знаю, что у меня действительно есть элемент html.
Затем я подумал, может быть, поскольку элемент таблицы анонимный (без идентификатора или имени), это и было причиной проблемы? Чтобы решить эту проблему, я попытался обернуть целевой тег в div следующим образом:
// try wrapping target element in a div with id
target.wrap("<div id='target_wrap' />");
Однако он только вернул ту же ошибку «не функция», но на этот раз со ссылкой на метод wrap(). Я убедился, что "wrap()" ДЕЙСТВИТЕЛЬНО является допустимой функцией jQuery.
Г) Другие мысли
В этом сообщении упоминается, что версия Chrome "Не Ошибка «Функция» — это ошибка «Uncaught TypeError». Он предлагает несколько экземпляров jQuery на одной странице в качестве возможной причины. Опять же, это связано с отсутствием конфликта, и я не совсем уверен, относится ли это ко мне или нет, хотя я склоняюсь к «нет».
Единственное, что я мог придумать, это то, что, возможно, проблема как-то связана с несоответствиями, различиями и различиями между объектами jQuery, объектами DOM и объектами JavaScript?
В процессе публикации этого я нашел это сообщение jQuery, которое может быть актуальным, но я не могу понять это. Кажется, рекомендуется реализовать какой-то плагин или пакет - как я могу определить, просто ли это кто-то пытается продвигать свой код или это реальный, «лучший метод», принятый модуль?
