怎么得到父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添加类丢失focus()时add,但只有一个.

对于前者 如果id=inputError在类元素<div class="form-group has-error">添加类中输入失去焦点add: <div class="form-group has-error add">

我想只在一个元素中form-group添加类"add".

我用代码:

$(".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')
})