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

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/