將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/