在jQuery点击处理程序中获取选择器父ID

Get selector parent id in jQuery click handler

本文关键字：获取 选择器 ID 程序 jQuery 处理      更新时间：2023-09-26

我想获取被点击的元素的父 id，所以在这种情况下要么#logo200_60_form要么#logo400_120_form。然后，我可以在其余代码中使用该 id。

我尝试了$(this).parent()但这给了我直系父母，我需要上升几个级别。当 id 在单击处理程序有一种方法可以确定哪个父项导致了单击。

.JS： 

$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput- exists').on('click', function() {
    $('form').get(0).reset();
    $('#logo200_60').trigger('change');
    $('#logo200_60_thumb').attr('src', 'http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image');
});

.HTML：

<form action="#" role="form" id="logo200_60_form">
  <p>Please upload 200x60 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
        <img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
      </div>
      <div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"></div>
      <div>
        <span class="btn default btn-file">
                                            <span class="fileinput-new"> Select image </span>
        <span class="fileinput-exists"> Change </span>
        <input type="file" name="..." id="logo200_60">
        </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>
  </div>
</form>
<form action="#" role="form" id="logo400_120_form">
  <p>Please upload 400x120 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
        <img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
      </div>
      <div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"></div>
      <div>
        <span class="btn default btn-file">
                                            <span class="fileinput-new"> Select image </span>
        <span class="fileinput-exists"> Change </span>
        <input type="file" name="..." id="logo400_120">
        </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>
  </div>
</form>

将closest()与属性值选择器一起使用。

$(this) // The element that is clicked
    .closest('form') // First <form> ancestor
    .attr('id') // Get the value of `id` attribute
我

尝试了$（this）.parent（），但这给了我直接的父级，我需要上升几个级别。

你可以改用 .parents（），获取当前匹配元素集中每个元素的祖先，可以选择通过选择器过滤：

$(this).parents('form').attr('id');

希望这有帮助。

$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput-exists').on('click', function() {
	alert($(this).parents('form').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" role="form" id="logo200_60_form">
  <p> Please upload 200x60 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
        <img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>
      <div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
      <div>
        <span class="btn default btn-file">
          <span class="fileinput-new"> Select image </span>
          <span class="fileinput-exists"> Change </span>
          <input type="file" name="..."    id="logo200_60"
                 > </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>
  </div>
</form>      
<form action="#" role="form" id="logo400_120_form" >
  <p> Please upload 400x120 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
        <img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>
      <div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"> </div>
      <div>
        <span class="btn default btn-file">
          <span class="fileinput-new"> Select image </span>
          <span class="fileinput-exists"> Change </span>
          <input type="file" name="..."  id="logo400_120"
                 > </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>
  </div>
</form>

相关文章：