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>

我希望当输入在类元素div中失去焦点（focusout）时，类form-group添加类add，但只有一个。

对于前。如果id=inputError的输入在课程元素<div class="form-group has-error">中失去焦点，请添加课程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')
})

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

怎么得到父div

5 个答案: