JQuery найти идентификатор для элемента выбора

Question

Мне нужно получить $empSupID из строки, в которой был изменен флажок.

Вот php:

...
while(mysqli_stmt_fetch($stmtGetEmployeeSupplements))
    {
        $checkedincludeTRS = ($includeTRS == '1') ? 'checked="checked"':'';
        ?>                      
        <tr>
            <td> <div contentEditable='true' class='edit' id='empSupID_<?php echo $empSupID; ?>'><?php echo $empSupID; ?></div> </td>
            <td> <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'><?php echo $name; ?></div> </td>
            <td> <div contentEditable='true' class='edit' id='amount_<?php echo $id; ?>'><?php echo $amount; ?></div></td>
            <td> <div contentEditable='true' class='edit' id='description_<?php echo $id; ?>'><?php echo $description; ?></div> </td>
            <td> <div><input contentEditable='true' class='edit' type='checkbox' id='includeTRS_<?php echo $id; ?>' <?php echo $checkedincludeTRS; ?> /></div> </td>
            <td style="display:none;"> <div contentEditable='true' class='edit' id='randomKey_<?php echo $id; ?>'><?php echo $rndKey; ?></div> </td>
            <td> <button type='button' class='deleteEmpSup'  id=<?php echo $empSupID; ?>>Delete</button> </td>                      
        </tr>
    <?php
    $count ++;
}

Вот jQuery:

    $(".edit").focusout(function() {
        $(this).removeClass("editMode");

        var id = this.id;
        var split_id = id.split("_");
        var field_name = split_id[0];
        var edit_id = split_id[1];

        var position = $(this).parents('tr').find('.positionList').val();

        var value = $(this).text();

        var employeeSupplementID = this.id

        $.ajax({
            url: 'update.php',
            type: 'post',
            data: { field: field_name, value: value, id: edit_id, position: position, checked: checkedStatus },
            success: function(response) {         
            }
        });

    });

Я пробовал var employeeSupplementID = $("[id^=empSupID_]"); в jQuery, но он возвращает массив какэто: employeeSupplementID = k.fn.init(2) [div#empSupID_5.edit, div#empSupID_6.edit, prevObject: k.fn.init(1)]. Я не уверен, что делать с этим.

Ожидаемый результат будет employeeSupplementID = "empSupID_5", если флажок был изменен для строки с empSupID из 5.

Как я могувыполнить это?

Answer 1

Я думаю, это то, что вам нужно. От элемента .edit поднимайтесь вверх, пока не найдете tr, затем найдите идентификатор, начинающийся с empSupID_, получите атрибут id и разделите на _, получив вторую часть идентификатора.

var employeeSupplementID = $(this).parents("tr").find("[id^=empSupID_]").attr("id").split("_")[1];

Answer 2

Я бы попробовал

empSupID = $(e.target).closest("tr").find("[id^=empSupID]").prop("id").split("_")[1]

Как это

$("table").on("click",function(e) {
  console.log(e.target.type)
  if (e.target.type && e.target.type==="checkbox") {
    console.log(
      $(e.target).closest("tr").find("[id^=empSupID]").prop("id").split("_")[1]
    )  
  }
})  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div contentEditable='true' class='edit' id='empSupID_1'>emp1</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='name_1'>name1</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='amount_1'>amt1</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='description_1'>desc1</div>
    </td>
    <td>
      <div><input contentEditable='true' class='edit' type='checkbox' id='includeTRS_1' /></div>
    </td>
    <td style="display:none;">
      <div contentEditable='true' class='edit' id='randomKey_1'>key1</div>
    </td>
    <td> <button type='button' class='deleteEmpSup' id=1>Delete</button> </td>
  </tr>
  <tr>
    <td>
      <div contentEditable='true' class='edit' id='empSupID_2'>emp2</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='name_1'>name2</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='amount_1'>amt2</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='description_1'>desc2</div>
    </td>
    <td>
      <div><input contentEditable='true' class='edit' type='checkbox' id='includeTRS_1' /></div>
    </td>
    <td style="display:none;">
      <div contentEditable='true' class='edit' id='randomKey_1'>key2</div>
    </td>
    <td> <button type='button' class='deleteEmpSup' id=2>Delete</button> </td>
  </tr>  
</table>