$('#editBtn').on('click', function(e){
console.log($('#main-id').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>64</td>
<td>2</td>
<td>2₪</td>
<input type="hidden" name="idd" value="64" id="main-id">
<td>
<span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
</td>
<td>
<span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
</td>
</tr>
<tr>
<td>65</td>
<td>25</td>
<input type="hidden" name="idd" value="65" id="main-id">
<td>
<span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
</td>
<td>
<span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
</td>
</tr>
</table>
那么这个逻辑有什么问题呢？
ID 必须是唯一的
这里的大问题是重复使用相同的 id。根据 Web 标准，每个页面的 ID 应该是唯一的。这在 Web 标准中有详细说明，并通过现有方法（例如getElementById. 请注意，该方法是“getElement”，而不是“getElements”。
那么我们如何解决这个问题呢？任何时候您需要识别元素，并且这些元素在页面上“逻辑地”重复，这就是类的潜在用例。课程可以重复。
$('.editBtn').on('click', function(e) {
console.log($('.main-id').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
64
<input type="hidden" name="idd" value="64" class="main-id">
</td>
<td>2</td>
<td>2₪</td>
<td>
<span class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
</td>
<td>
<span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
</td>
</tr>
<tr>
<td>
65
<input type="hidden" name="idd" value="65" class="main-id">
</td>
<td>25</td>
<td>
<span class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
</td>
<td>
<span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
</td>
</tr>
</table>
因此，第二个代码段已更改为使用类，但仍保持相同的行为。这是为什么？那是因为val()只会返回选择器所有结果的第一个值。因此，当我们找到类为 的所有元素时main-id，它只会记录第一个元素。我们如何解决这个问题？
上下文查找
当您执行诸如$('.main-id')jQuery 实际执行的操作时$(document).find('.main-id')。它隐式地将document用作context。上下文是在其中搜索子项的元素。
考虑到这一点，就我们的问题而言，我们的背景是什么？我们的上下文是每一行。因此，为了获取main-id我们想要的特定信息，我们应该使用上下文查找来找到它。这将类似于以下内容。
$('.editBtn').on('click', function(e) {
console.log($(e.target).closest('tr').find('.main-id').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
64
<input type="hidden" name="idd" value="64" class="main-id">
</td>
<td>2</td>
<td>2₪</td>
<td>
<span class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
</td>
<td>
<span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
</td>
</tr>
<tr>
<td>
65
<input type="hidden" name="idd" value="65" class="main-id">
</td>
<td>25</td>
<td>
<span class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
</td>
<td>
<span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
</td>
</tr>
</table>
现在单击编辑按钮会记录正确的值。这是如何运作的？所以我们要做的第一件事是将e.target（被点击的元素）包装在一个 jQuery 对象中，这样我们就可以访问 jQuery 方法。然后我们使用该closest()方法找到该元素的 parent tr。那tr就是我们的上下文。从那里，我们对 执行查找.main-id，它只会在我们的特定行中找到主 ID，然后繁荣。你有你想要的元素/值。