Question

我想获取点击的元素的父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&amp;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>

Answer 1

将closest() ~~与attribute-value selector一起使用。~~

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

Answer 2

我尝试了$（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>

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

2 个答案: