找到最接近的类并设置数据属性

Question

你好，我有这个表有一些按钮我想找到最近的按钮并设置数据属性，但它找到所有按钮与该类和设置数据属性不起作用嗯，你能帮助我吗？伙计们？

https://jsfiddle.net/gkgmmahj/

//I'm looking for class .query-single-answer

$(document).on('change', '#select-headquarter', changeHeadquarter);

function changeHeadquarter() {
  console.log('fired');
  // Check input( $( this ).val() ) for validity here
  $("select option:selected").each(function() {
    var select = $(this).val();
    var survey = $(this).data('id');
    var url;
    var singleAnswer = $(this).closest('.query-for-single-answer');
    singleAnswer.data('headquarter', select);
    singleAnswer.data('id', survey);
    console.log(singleAnswer);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-striped table-bordered table-responsive table-manager">
  <thead>
    <tr>
      <td>Denumire</td>
      <td>Sediu</td>
      <td>Actiuni</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>primul chestionar</td>
      <td class="col-md-2">
        <div class="form-group">
          <select id="select-headquarter" name="selectbasic" class="form-control">
            <option value="default">Alege Sediu</option>
            <option value="1" data-id="1">Ploiesti</option>
          </select>
        </div>
      </td>
      <td class="table-fit-column">
        <button class="btn btn-default query-for-single-answer" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="" data-original-title="Raport Selectie Unica">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Multipla">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Unica Cu Punctaj">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Multipla Cu Punctaj">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Intrebari Deschise">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <a href="/app_dev.php/admin/report/list/questions/1/1" class="btn btn-default" data-tooltip="tooltip" data-placement="top" title="Vizualizare Raport Comentarii">
          <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td>chestionar 2 intrebari</td>
      <td class="col-md-2">
        <div class="form-group">
          <select id="select-headquarter" name="selectbasic" class="form-control">
            <option value="default">Alege Sediu</option>
            <option value="1" data-id="3">Ploiesti</option>
          </select>
        </div>
      </td>
      <td class="table-fit-column">
        <button class="btn btn-default query-for-single-answer" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="" data-original-title="Raport Selectie Unica">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Multipla">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Unica Cu Punctaj">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Multipla Cu Punctaj">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Intrebari Deschise">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <a href="/app_dev.php/admin/report/list/questions/3/1" class="btn btn-default" data-tooltip="tooltip" data-placement="top" title="Vizualizare Raport Comentarii">
          <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td>nicole-1</td>
      <td class="col-md-2">
        <div class="form-group">
          <select id="select-headquarter" name="selectbasic" class="form-control">
            <option value="default">Alege Sediu</option>
            <option value="2" data-id="7">Bucuresti</option>
          </select>
        </div>
      </td>
      <td class="table-fit-column">
        <button class="btn btn-default query-for-single-answer" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="" data-original-title="Raport Selectie Unica">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Multipla">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Unica Cu Punctaj">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Multipla Cu Punctaj">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <button class="btn btn-default query-for-report" data-toggle="modal" data-target="#show-respondents-modal" data-id="" data-headquarter="" data-usernumber="" data-tooltip="tooltip" data-placement="top" title="Raport Selectie Intrebari Deschise">
          <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
        </button>
        <a href="/app_dev.php/admin/report/list/questions/7/1" class="btn btn-default" data-tooltip="tooltip" data-placement="top" title="Vizualizare Raport Comentarii">
          <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

closest的定义：

  

对于集合中的每个元素，通过测试元素本身并通过DOM树中的祖先遍历来获取与选择器匹配的第一个元素。

所以这只适用于父母。

如果您想在同一个tr中找到该按钮，则可以使用tr向上移动到父$(this).closest('tr')，而不是按类.query-for-single-answer找到该按钮。

整行将是：

$(this).closest('tr').find('.query-for-single-answer')