-1

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');

ASP.NET 中必填字段验证器的 JQUERY 代码：

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 对象 - 文本框] 没有最接近的方法

我尝试过使用“查找”“父级”等进行不同的交互，但我尝试的任何方法似乎都不起作用。

我的代码有什么问题？我无法抓住那个跨度。需要

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

4

5 回答 5

1

试试 txtbox.parent() 代替。

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

于 2013-10-30T18:38:25.457 回答
1 
$('span.required').addClass('missing');
于 2013-10-30T18:38:49.780 回答
1

尝试这个：

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

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

于 2013-10-30T18:44:51.690 回答
1

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

  1. 为所有标签添加一个for属性，将<label>它们与匹配的输入配对（这确实应该始终使用标签完成），并且
  2. 移动<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');

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

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

我已经多次使用它来将验证与正在验证的字段的标签配对。. . 又快又干净。:)

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

于 2013-10-30T19:29:18.677 回答
0

看看这个，我同时使用了最接近（）和父（）。

<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。

于 2013-10-30T19:12:56.203 回答