是否有跨浏览器的方式在 expando 属性上使用 jQuery 选择器?

Posted

技术标签:

【中文标题】是否有跨浏览器的方式在 expando 属性上使用 jQuery 选择器?【英文标题】:Is there a cross-browser way to use a jQuery selector on an expando property? 【发布时间】:2011-04-07 08:50:13 【问题描述】:

我有一个 ASP.NET 页面,我正在尝试使用 jQuery 选择器快速匹配绑定到特定文本框(文本输入)的验证控件。验证控件呈现为 span,“controltovalidate”属性呈现为 expando 属性。这是一个测试示例:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
            ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

        <asp:Button ID="Button1" runat="server" Text="Button" /></div>

        <input type="button" value="Test" onclick="ml_test();" />

        <script type="text/javascript">
            ml_test = function() 
                alert($('[controltovalidate=TextBox1]').get().length);
            ;
        </script>

    </form>
</body>
</html>

呈现为:

(code removed here)

        <input name="TextBox1" type="text" id="TextBox1" />
        <span id="RequiredFieldValidator1" style="color:Red;visibility:hidden;">RequiredFieldValidator</span>
        <span id="RegularExpressionValidator1"></span>

        <input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button1" /></div>

        <input type="button" value="Test" onclick="ml_test();" />

        <script type="text/javascript">
            ml_test = function() 
                alert($('[controltovalidate=TextBox1]').get().length);
            ;
        </script>

(code removed here)

<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "TextBox1";
RequiredFieldValidator1.errormessage = "RequiredFieldValidator";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>

问题:ml_test() 函数在 Internet Explorer 7 中显示为 1(如预期),但在 Firefox 3.6.8 中显示为 0。我尝试添加其他控件,但在 Firefox 中它始终不起作用。

我发现this post 显示在选择器中使用了一个与号,例如[@expando=value],但是当我尝试这种语法时,jQuery 1.4.2 会抛出一个错误。

是否有跨浏览器的方式来选择 expando 属性,如果有,正确的语法是什么?

【问题讨论】:

@ 字符适用于 1.3 之前的 jQuery 版本。 【参考方案1】:

你可以像这样使用.filter()

ml_test = function() 
    alert($('span').filter(function()  return this.controltovalidate=='TextBox1'; ).length);
;

You can test it here,或将其设为自定义选择器,如下所示:

jQuery.expr[':'].validatorFor = function(o, i, m)
  return o.controltovalidate === m[3];
;​

然后这样称呼它:

ml_test = function() 
    alert($('span:validatorFor(TextBox1)').length);
;

You can that that version here.

【讨论】:

谢谢,这更符合我的要求。但是,由于 ASP.NET 允许开发人员构建自己的验证控件,因此无法保证它们始终呈现为跨度。有没有更通用的方法来做到这一点而不指定元素的类型? @NightOwl888 - 是的,你可以把span 去掉,但它会检查每一个元素,任何你可以瘦身的方法都会有帮助并效率更高。 所以换句话说,考虑到表单上可能有几十个元素并且最多只有十几个左右,ASP.NET 生成的全局 JavaScript 数组变量很可能会更有效数组中的元素。我可能会这样做,但感谢您让我了解 jQuery 中的自定义选择器功能。【参考方案2】:

您是否正在寻找显示无效验证消息的跨度?

如果是这样试试这个:(使用 jQuery)

ml_test = function() 
    alert($('RequiredFieldValidator1').length);
;

如果您还希望能够查看它正在验证的控件,请执行以下操作:

ml_test = function() 

    // getting the control with jQuery by its ID.  .Net already has it
    // defined in the script block that is generated by the 
    // RequiredFieldValidator control
    var validateCtrl = $(RequiredFieldValidator1.id);  

    // get the value from the .Net-defined validator variable
    var controlToValidate = RequiredFieldValidator1.controltovalidate;

    // alert the values:
    alert('RequiredValidatorControl count: ' + validator.length + 
          '\nControl To Validate: ' + controlToValidate);

;

【讨论】:

不,我正在构建一个控件。我正在尝试在一个简单的 jQuery 选择器中检索所有验证 TextBox1 的验证控件。我不会事先知道控件的名称,所以这个例子不适合我的目的。注意:我已经知道我可以使用 Page_Validators 变量来执行此操作,但我希望完成我的任务,而无需遍历页面上的所有验证控件 - 即使用 jQuery 选择器。 我不知道如何使用 .Net 生成的值。

以上是关于是否有跨浏览器的方式在 expando 属性上使用 jQuery 选择器?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Expando 查询预先不知道的多个属性?

在 Django 模板中迭代 Expando 的动态属性

是否有跨浏览器的方法来忽略 XHR 触发的 401 错误?

使用 expando 元类添加 curried 闭包作为静态属性会丢失默认参数值

动态查询 - Expando/动态对象类型

跨域问题