Question

问题是jQuery正在检测页面上出现的任何错误消息。

**请参阅示例here

- 我不希望在没有消息时应用该样式。

代码：

$( document ).ready(function() {
   if($('.CP_CF_Container > span.msg-error').length){   
       $('.vertical-input').addClass('checkbox-fld-error')
   }
});

的CSS：

.checkbox-fld-error{border:1px solid red}
.CP_CF_Container{width:50%;background-color:#eee;padding:5px;}
.msg-error{color:red}

HTML：

    <div class="CP_CF_Container">
        <div class="vertical-input">hello there</div>
        <span class="msg-error" >Error</span>
    </div>
    <br>
    <div class="CP_CF_Container">
        <div class="vertical-input">hello there</div>
        <span class="msg-error" >Error</span>
    </div>
    <br>

    <div class="CP_CF_Container">
        <div class="vertical-input">hello there</div>
    </div>

Answer 1

您可以链接方法并使用.prev()或.siblings()方法：

$('.CP_CF_Container > span.msg-error')
        .prev('.vertical-input')
        .addClass('checkbox-fld-error');

http://jsfiddle.net/HL9GP/

您还可以使用.has()方法返回/过滤具有指定元素的元素：

$('.CP_CF_Container').has('span.msg-error')
                     .find('.vertical-input')
                     .addClass('checkbox-fld-error');

Answer 2

页面上的jQuery有点格格不入：

变化：

if($(this).('.CP_CF_Container > span.msg-error').length){

到

if($('.CP_CF_Container > span.msg-error').length){

http://jsfiddle.net/99tDR/5/

将css样式应用于包含错误消息的div

2 个答案: