jQuery TypeError:<whatever>不是Firefox上的表对象</whatever>的函数

时间:2013-04-21 22:08:57

标签: jquery firebug typeerror uncaught-exception

我在Firefox中使用FireQuery。这是我想要做的:

  1. 文本“订购的商品”存在于某个地方的标签内 页面。
  2. “Items Ordered”文本所在的表格也嵌套在其他几个表格中。
  3. 鉴于上述情况,我想抓住最接近上述字符串的<table>标记,并为其附加一个div。我确保获取正确DOM元素的标准方法是更改​​背景颜色并为其提供1px边框,以便弹出并在页面上轻松辨别。但是,我的代码失败了。所以,我试图理解它为什么失败以及如何在继续追加div之前修复它。

    以下是我用于测试的代码:

    [HTML - 实际代码,包含替代的个人信息&amp;链接]

    <!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">&nbsp;</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 &amp; Handling:</td>
    
                                                    <td nowrap="nowrap" align="right">$0.00</td>
                                                </tr>
    
                                                <tr valign="top">
                                                    <td nowrap="nowrap" align="right">&nbsp;</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">&nbsp;</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">&nbsp;</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
    • 萤火虫
    • Firequery
    • 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元素。

    然后我想,因为表元素是匿名的(没有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

    D)其他想法

    This post提到Chrome版本的“Not a Function”错误是“Uncaught TypeError”错误。它建议在同一页面上有多个jQuery实例作为可能的原因。同样,这与noConflict有关,我不确定这是否适用于我,尽管我倾向于'不'。

    我能想到的另一件事是,问题可能与jQuery对象,DOM对象和JavaScript对象之间的差异和差异以及差异有关吗?

    在开始发布此过程中,我发现this jQuery post可能是相关的,但我无法理解。它似乎建议实现一些插件或包 - 我如何判断这是否只是某人试图推广他们的代码,或者它是否是一个真正的“最佳实践”,被接受的模块?

1 个答案:

答案 0 :(得分:1)

  

我想抓住最接近前面提到的字符串的标记,并在其上附加一个div。

试试这个 -

$("b:contains('Items Ordered')").closest('table').wrap("<div id='target_wrap' />");