Как получить родительский div

Question

Добрый день.

<div class="form-group has-success"> 
    <label class="control-label" for="inputSuccess">Input with success</label> 
    <input type="text" class="form-control" id="inputSuccess"> 
</div> 
<div class="form-group has-warning"> 
    <label class="control-label" for="inputWarning">Input with warning</label> 
    <input type="text" class="form-control" id="inputWarning"> 
</div> 
<div class="form-group has-error"> 
    <label class="control-label" for="inputError">Input with error</label> 
    <input type="text" class="form-control" id="inputError"> 
</div> 

Я хотел бы, что, когда вход теряет фокус (focusout) в классе элемента DIV с классом form-group надстройкой класса add, но только один.

Для примера. если вход с id=inputError теряет фокус в классе элемента <div class="form-group has-error"> добавить класса add: <div class="form-group has-error add">

И я хотел бы, что только в один элемент с классом form-group надстройкой класса «добавить».

Я использую код:

$(".form-control").focusout(function(){ 

}) 

, но я не знаю, как получить родительский DIV с классом form-group ...

Как это сделать?

Answer 1

Вы можете использовать .closest(), чтобы выяснить, ближайший предок элемент, соответствующий данной селектор

$(".form-control").focusout(function(){ 
    var $div = $(this).closest('.form-group').addClass('add') 
}) 

в вас случае, если form-group элемент всегда является прямым родителем form-control элемента, то вы можете даже использовать .parent()

$(".form-control").focusout(function(){ 
    var $div = $(this).parent().addClass('add') 
}) 

Answer 2

Вы также можете использовать метод parent()

$(".form-control").focusout(function(){ 
    $(this).parent().addClass('add'); 
}) 

Answer 3

$(".form-control").focusout(function(){ 
    $(this).parent('.form-group').addClass('add'); 
}); 

Answer 4

Вы можете попробовать это

$(".form-control").on('focusout', function(){ 
    $(this).closest('.form-group').addClass('add'); 
}); 

или это один

$(".form-control").on('focusout', function(){ 
    $(this).parent().addClass('add'); 
}); 

Answer 5

$(".form-control").focusout(function(){ 
    $(this).parent().addClass('add'); 
})