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

Question

Hello i have this table with some buttons i would like to find the closest button and set data attributes on it but instead it finds all of the buttons with that class and setting data attribute doesn't work hmm can you help me out guys ?

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

The definition of 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.

So it's only for parents.

If you want to find the button in the same tr you can "go up" to the parent tr using $(this).closest('tr') than find the button by class .query-for-single-answer .

The full line will be:

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