提问者:小点点

隐藏最近的行定位标记jquery


我有多个带有类行的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


共2个答案

匿名用户

您必须获得下一个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();
});