javascript - 如何获取 JQuery 最接近的输入 ID 和数据属性？

Question

我的表单中有多个使用“添加”按钮的输入字段。我创建了带有图像标签的按钮。每个图像标签都有相同的类。单击图像后，我想获取离我最近的输入字段的 ID 以及数据属性值。这是我的 HTML 示例:

<div class="formItem">
    <label for="status">Status:</label>
    <input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
    <label for="age">Age:</label>
    <input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>

这是我在 JQuery 中尝试过的:

$('.masterRecords').on('click', function(){
    console.log($(this).closest('input').prop('id'));
});

在我的调试控制台中，我只看到'undefined'。首先，我不确定我是否找到了解决此问题的最佳方法。我重复一遍，有多个元素使用同一个类，我需要为每个元素提取 ID 和数据。正如您在上面的示例中所见，它们都位于单独的 div 容器中。如果有人看到我的代码中的错误在哪里，请告诉我。如果有更好的方法使用 JQuery/HTML5/CSS3 执行此操作，我也想听听一些建议。谢谢。

Answer 1

尝试使用 siblings 而不是 closest。

$('.masterRecords').on('click', function(){
    console.log($(this).siblings('input').prop('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formItem">
    <label for="status">Status:</label>
    <input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
    <img src="/image/Qo01e.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
    <label for="age">Age:</label>
    <input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
    <img src="/image/Qo01e.png" alt="Click to add value" class="masterRecords" />
</div>