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

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的定义:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

所以它只适合 parent 。

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

完整的行是:

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