我有多个带有类行的div,在每一行中都有一个下拉列表,在更改下拉列表时,我想用类“add_marks”隐藏锚标记,它位于同一行中。
我使用下面的代码来隐藏它:
null
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><a href="javascript:void(0);" class="add_marks btn btn-primary"><i class="material-icons">add</i>Add Marks</a></div>
</div>
</div>
null
您必须获得下一个div并找到a链接,然后隐藏它。
var nearest_row = $(this).closest('div.row');
获取div.row.clearfix.attr_fields
,但链接存在于下一个div中,因此执行下一步操作将获取下一个div元素,然后找到'a'元素。
您也可以执行next('div'),而不是获取下一个元素来查找下一个div。
null
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><a href="javascript:void(0);" class="add_marks btn btn-primary"><i class="material-icons">add</i>Add Marks</a></div>
</div>
</div>
下面是使用js运行它的工作代码示例(快捷方式:Ctrl+Enter
)
。。。想用类“add_marks”隐藏位于同一行中的锚标记。
所以我把那个按钮移到行里了。 使用.col*
作为.row
的直接子级是使用引导网格的正确方法。
考虑到您的需求,使用了以下jQuery。
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});