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

标签 javascript jquery

我想获取被点击的元素的父 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() <罢工>与attribute-value selector .

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

关于javascript - 在 jQuery 单击处理程序中获取选择器父 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34961385/

相关文章:

javascript - Passport LocalStrategy 类名不一致

javascript - 在我的服务器上安装/设置 Socket.IO

javascript - JS 拆分 OR 逻辑运算符

键盘上方的 jQuery Mobile 页脚

javascript - jquery 调整图像大小

javascript - Jquery "select all"复选框

jQuery Tipsy 工具提示插件定制

javascript - 使用 jquery validation engine master 验证星级

javascript - Jquery/CSS 效果不适用于所有版本的谷歌浏览器

jquery - 关闭按钮在弹出窗口中不起作用