Question

HTML：

<fieldset>
    <p>
       <label>SOME LABEL</label><span class="required"> *</span>
    </p>
    <input type="text" id="txtBox">
</fieldset>

使用jQuery我试图获得“span.required”并添加一个“缺失”类（将颜色更改为红色）。

JQuery代码：

$('#txtBox').closest('fieldset').find('span.required').addClass('missing');

JQUERY CODE for ASP.NET中的必填字段验证器：

for (var i = 0; i < Page_Validators.length; i++) {
            var val = Page_Validators[i];
            var ctrl = document.getElementById(val.controltovalidate);
            if (ctrl != null && ctrl.style != null) {
                if (!val.isvalid) {
                    ctrl.closest('fieldset').find('span.required').addClass('missing');
                }
                else {
                    //alert('no error');

                }
            }
        }

通过控制台发生错误：对象[ctrl对象 - 文本框]没有最接近的方法

我尝试使用“查找”“父母”等进行不同的互动，但我尝试的任何内容似乎都无效。

我的代码出了什么问题？我无法抓住那个span.required

感谢大家的意见，我从你的每一个输入中学到了很多东西。每个人的答案都有有效且有效的代码，但只有选中的代码才能提供解决方案。

Answer 1

请尝试使用txtbox.parent（）。

txtbox.parent().find('span.required-field').addClass('missing')

Answer 2

$('span.required').addClass('missing');

Answer 3

试试这个：

$(function(){
   $('#txtBox').parent().find('span.required').addClass('missing'); 
});

检查http://jsfiddle.net/alaminopu/unZPZ/

Answer 4

首先，您应该对HTML进行一些更改，这不仅可以帮助您解决此问题，还可以提供更清晰，更有效的代码：

为您的所有for代码添加<label>属性，并将这些代码与他们匹配的输入配对（这实际上应该始终使用标签），并且
移动标签内的<span class="required"> *</span>（因为它确实是标签的一部分）

结果代码如下所示：

<fieldset>
    <p>
        <label for="txtBox">SOME LABEL<span class="required"> *</span></label>
    </p>
    <input type="text" id="txtBox">
</fieldset>

一旦你完成了这项工作，你想要完成的工作变得更加容易：

而不是：

ctrl.closest('fieldset').find('span.required').addClass('missing');

。。。您可以使用输入的id（val.controltovalidate）作为JQuery选择器的一部分直接查找相关标签：

var $targetLabel = $("label[for='" + val.controltovalidate +"']")
$targetLabel.find('span.required').addClass('missing');

我已经多次使用这种方法将验证与正在验证的字段的标签配对。。。快速而干净。：）

编辑：我拆分了最后一个JS片段以防止它滚动，但它可能是一行。：）

Answer 5

检查一下，我使用了最近的（）和最近的（）。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <style>
            .missing{color:red;}
            .required{color:blue;}
        </style>

        <script>
            $(document).ready(function(){
                $(function(){
                   $('#txtBox').parent().find("span.required").removeClass("required").addClass("missing"); 
                   //$('#txtBox').closest("fieldset").find("span.required").removeClass("required").addClass("missing"); 
                });
            });
        </script>

    </head>

    <body>
        <fieldset>
            <p>
               <label>Some Label</label> <span class="required"> *</span>
            </p>
            <input type="text" id="txtBox">
        </fieldset>
    </body>
</html>

<强> http://jsfiddle.net/GdBnw/

HTH。

使用jquery使用asp.net必需的字段验证器验证必填字段

5 个答案: