奇妙的错误 —— 你能看出来吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.fn.extend({
            "setJson": function (json) {
                var id = this.id;
                var $form = $(this);
                //清空原有表单
                $form.find("select").each(function () {
                    this.selectedIndex = 0;
                });
                $form.find(":hidden").val("");  //# B 必须注释这一行，换成下一行( #C )， IE8(部分电脑) 和 Chrome 后面的行( #D )才能正常运行， 为什么？
                //clearHidden(this.id);         //# C                $form = $("#");
                //给表单赋值
                $("#sel").val("1"); //# D
            }
        });        function clearHidden(id) { 
            $("#"+id).find(":hidden").val("");
        }        function test() {
            var o = { "sel": "1" };
            $("#bd").setJson(o);
        }
    </script>
</head>
<body id="bd">
    <input type="hidden" value="1" id="vtid" />
    <select id="sel">
        <option value="0">---请选择---</option>
        <option value="1">第一项</option>
        <option value="2">第二项</option>
    </select>
    <input type="button" value="test" onclick="test()" />
</body>
</html>

解决方案 »

  1.   

     $form.find(":hidden").val(""); 这里的 $form 为  select  对象
    这个对象 不存在 属性为hidden 的子元素
    所以 $form.find(":hidden").val("");  这语句的赋值没有执行
      

  2.   

    想说什么就直接说吧， 不要打醉拳。
    this, 就是 传过来的id为bd (其实就是body)的对象--- $("#bd").setJson(o);
    当然， $form也就是bd包装后的 jquery对象， 你觉得全部是select吗？
    在body里， 找 hidden ， 有何不可？
    如果换成$form.find(":text").val("") ； 都是没有任何问题的。 
      

  3.   

    var id = this.id;alert(id);//undefined
      

  4.   

    谢谢指点！ 下面是修改后的代码<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $.fn.extend({
                "setJson": function (json) {
                    var id = this.attr("id");   //this已经是body被包装后的jquery对象
                    //清空原有表单
                    this.find("select").each(function () {
                        this.selectedIndex = 0;//此处的this是循环中的每一个select ， 不再是body
                    });
                    this.find(":hidden").val("");  //# B (此处的this是body被包装后的jquery对象) 必须注释这一行, IE8(部分电脑) 和 Chrome 后面的行( #C )才能正常运行， 为什么？                //给表单赋值
                    $("#sel").val("1"); //# C
                }
            });        function test() {
                var o = { "sel": "1" };
                $("#bd").setJson(o);
            }
        </script>
    </head>
    <body id="bd">
        <input type="hidden" value="1" id="vtid" />
        <select id="sel">
            <option value="0">---请选择---</option>
            <option value="1">第一项</option>
            <option value="2">第二项</option>
        </select>
        <input type="button" value="test" onclick="test()" />
    </body>
    </html>在Firefox下正常， 在IE8和Chrome下不行。
      

  5.   

     this.find("input:hidden").val("");
      

  6.   


    问题并不在这里，  this.find(":hidden").val("");  是简洁可行的代码我已搞清楚问题所在了， 谢谢关注！
      

  7.   

    alert(this.find(':hidden').size());//ff=1,ie8=4
    alert(this.find('input:hidden').size());//ff=1,ie8=1
      

  8.   

    方便的话， 帮我看看
    http://topic.csdn.net/u/20120331/09/ecbf4e98-84ab-46d5-a5ca-9498baafae60.html这一个贴
      

  9.   

    我只能说你有点无知了， :hidden是jquery的伪类，不是很必要应该避免使用，如果非要使用应该加上tagName选择器以提高效率(这和jquery的内部实现有关)，更何况:hidden并不只是表示type=hidden这么简单，他还包括所有其他不可见元素，比如head，script, visibility=hidden, display=none等，你的问题主要是出在各浏览器对option的解释不一样，firefox不认为option是不可见元素，而chrome刚认为option是不可见元素。。<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $.fn.extend({
                "setJson": function (json) {
                    var id = this.id;
                    var $form = $(this);
                    //清空原有表单
                    $form.find("select").each(function () {
                        this.selectedIndex = 0;
                    });
                    $form.find("[type=hidden]").val("");  //# B 必须注释这一行，换成下一行( #C )， IE8(部分电脑) 和 Chrome 后面的行( #D )才能正常运行， 为什么？
                    //clearHidden(this.id);         //# C

                    //$form = $("#");
                    //给表单赋值
                    //$("#sel").val("b"); //# D
                    $("#sel").prop("selectedIndex", 1);
                }
            });        function clearHidden(id) { 
                $("#"+id).find(":hidden").val("");
            }        function test() {
                var o = { "sel": "1" };
                $("#bd").setJson(o);
            }
        </script>
    </head>
    <body id="bd">
        <input type="hidden" value="1" id="vtid" />
        <select id="sel">
            <option value="0">---请选择---</option>
            <option value="1">第一项</option>
            <option value="2">第二项</option>
        </select>
        <input type="button" value="test" onclick="test()" />
        <script>
         var hiddens = $(":hidden");
         for(var i = 0, len = hiddens.length; i < len; i++){
         console.log(hiddens[i]);
         }
        </script>
    </body>
    </html>