jquery - 如何获取父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 )时，我希望这样添加类(class)add ，但只有一个。

例如。如果输入id=inputError在类元素中失去焦点 <div class="form-group has-error">添加类(class)add :<div class="form-group has-error add">

我只想在一个具有类 form-group 的元素中这样做添加类“add”。

我使用代码:

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

})

但我不知道如何获取带有类 form-group 的父级 div ...

这个怎么做？

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')
})