最も近いクラスを見つけ、データ属性を設定する

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の先祖を介してをトラバースするee。

これは親のためだけです。

あなたが同じtrでボタンを見つけたい場合は、クラス.query-for-single-answerによってボタンを見つけるよりも$(this).closest('tr')を使用して親trに「上がる」ことができます。

フルラインは次のようになります。

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