2017-03-21 93 views
2

我有一個表單,並且一些字段被設置在3組可摺疊div中,我不想驗證後如果任何字段有錯誤,父div會收到一個類來展開它。jquery添加類到最親近的

<div class="panel-group" id="fields_panel"> 
    <div class="panel panel-primary"> 
    <div id="basic_info_fields" class="panel-collapse collapse in"> <!-- add class "in" -->> 
     <div class="panel-body"> 
     <div class="row clearfix"> 
      <div class="col-md-12 m-b-0"> 
      <div class="form-group"> 
       <div class="form-line error"> <!-- if this div has "error" --> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

我有相同結構的兩個面板,eacho一個與一對夫婦領域,我試圖找到如有form-lineerror,並追加到panel-collapse父類in展開它。

現在,我有以下的jQuery代碼:

$(function() { 
    var elem = $('.panel').find('.form-line'); 
    if (elem.hasClass('error')) { 
     elem.closest('.panel-collapse').addClass('in'); 
    }; 
}); 

但它的in類適用於所有panel-collapse。 我應該怎麼做才能將它應用於具有該類的子元素的頂級父項,而不是所有的父項?

+0

elem.parent()的父()的父()的父()的父()的父()找到(」面板合攏。 ')addClass(' 在)。。。。。; (也許太多的父母()。嘗試刪除一些如果不工作) – Roy

回答

3

您的hasClass將不起作用elem是一個jQuery對象數組 - 不僅僅是一個。

爲什麼你需要它 - 爲什麼不直接包括在您選擇的類:

$('.panel').find('.form-line.error').closest('.panel-collapse').addClass('in'); 

這也阻止你通過數組中的元素循環不具有類從而提高效率

+1

謝謝你的解決方案完美地工作,說實話我試圖學習jquery,有時我只是不知道我在做什麼。 –

2

使用以下代碼:

$('.panel').find('.form-line.error').each(function(){ 
    $(this).closest('.panel-collapse').addClass('in'); 
}); 

$(this)是指具有的error類指定的元素。

+0

@Pete這是代碼的簡單化...它產生完全相同的輸出。 – mhodges

+0

@Pete我提出了兩個答案,但我仍然更喜歡這個答案,因爲它可以消除讀者的不確定性。 '.closest()'返回一個元素。但是,如果您在jQuery集合上調用它,它將返回一個集合。這是讀者必須事先知道的內部知識。順便說一下,這恰恰是絆倒OP的原因......使用'.each()'立即暗示讀者可能會返回一個或多個結果,並且他們希望爲每個結果做些事情。 – mhodges

+0

@Pete至於複製和粘貼某人的答案以改變一些與我一樣小的事情只是徹頭徹尾的不道德。如果我做了任何劇烈的改變,我100%同意你的看法 - 但是爲了我編輯的編輯而跳下我的喉嚨完全沒有要求。 – mhodges