点击按钮

Question

考虑以下标记：

<div class="attachments">
<div class="form-group first-item">
  <label class="control-label col-md-4">Some Label</label>
  <div class="col-md-8">
     <div class="row">
        <div class="col-md-6">
           <input type="file" multiple id="first-item-input" class="inputfile" />
           <label for="first-item-input">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                 <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
              </svg>
              <span>Choose a file&hellip;</span>
              <input type="hidden" value="Some Hidden Value" id="first-input-hidden-value" />
           </label>
        </div>
        <div class="col-md-6">
           <button type="submit" id="first-item-btn" class="btn btn-default attachment-upload">Upload</button>
        </div>
     </div>
  </div>
</div>
<div class="form-group">
  <div class="col-md-8 col-md-offset-4">
     <div class="box">
        <div class="row">
           <div class="col-md-12">
              <div class="table-responsive">
                 <table class="table table-bordered attachment-table" id="first-item-table">
                    <thead>
                       <tr>
                          <th>...</th>
                          <th>...</th>
                          <th>...</th>
                          <th>...</th>
                       </tr>
                    </thead>
                 </table>
              </div>
           </div>
        </div>
     </div>
  </div>

  

以上标记被多次使用，其中id被相应地改变，例如， second-item-input, second-item-btn, second-item-table等（最多10个但不限）。每次用户点击相应的button时，我都会尝试获取表格ID。如果用户单击标识为first-item-btn的按钮，则应返回给我的表ID为first-item-table，依此类推每个按钮单击。

到目前为止，这就是我所拥有的：

$('.attachment-upload').click(function () {
    var buttonId = this.id,
        tableId = $(this).parent().parent().parent().parent().parent().find('table').attr('id');
    console.log(tableId);
});

以上的作品，但似乎链接了很多，所以我想知道是否有另一种方式或这是我可以去做的唯一方法。

Answer 1

查看Jquery Closest Function

$('.attachment-upload').click(function () {
   var buttonId = this.id,
   tableId =$(this).closest(".attachments").find('table').attr('id');
   console.log(tableId);
});

Answer 2

使用.closest('.attachments').find('table')

$('.attachment-upload').click(function() {
  var buttonId = this.id,
    tableId = $(this).closest('.attachments').find('table').attr('id');
  console.log(tableId);
});

<强>演示

$('.attachment-upload').click(function() {
  var buttonId = this.id,
    tableId = $(this).closest('.attachments').find('table').attr('id');
  console.log(tableId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="attachments">
  <div class="form-group first-item">
    <label class="control-label col-md-4">Some Label</label>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">
          <input type="file" multiple id="first-item-input" class="inputfile" />
          <label for="first-item-input">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                 <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
              </svg>
              <span>Choose a file&hellip;</span>
              <input type="hidden" value="Some Hidden Value" id="first-input-hidden-value" />
           </label>
        </div>
        <div class="col-md-6">
          <button type="submit" id="first-item-btn" class="btn btn-default attachment-upload">Upload</button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-8 col-md-offset-4">
      <div class="box">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table table-bordered attachment-table" id="first-item-table">
                <thead>
                  <tr>
                    <th>...</th>
                    <th>...</th>
                    <th>...</th>
                    <th>...</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>