如何在 jQuery 中精准获取动态生成元素的相邻兄弟节点文本值-php教程-PHP中文网

如何在 jQuery 中精准获取动态生成元素的相邻兄弟节点文本值

本文讲解如何使用 jQuery 的 next() 方法，准确获取被点击动态元素（如 .db_record）后紧邻的 .customerID 兄弟元素的文本内容，避免 siblings() 误匹配多个目标的问题。

本文讲解如何使用 jquery 的 `next()` 方法，准确获取被点击动态元素（如 `.db_record`）后紧邻的 `.customerid` 兄弟元素的文本内容，避免 `siblings()` 误匹配多个目标的问题。

在处理动态生成的 DOM 结构时，事件委托是必需手段，但获取关联数据时容易陷入选择器逻辑误区。你当前的代码使用 $(this).siblings(".customerID")，问题在于：siblings() 会遍历所有同级 .customerID 元素（不限于紧邻），而你的 HTML 结构中，每个 .db_record 后紧跟一个独立的 <span class="customerID"></span> —— 它们是下一个相邻兄弟节点（next sibling），而非广义“兄弟”。

✅ 正确做法是使用 next() 方法，它严格匹配紧接在当前元素之后的、满足选择器的第一个同级元素：

function checkCustomerInformation() {
  $(".db_records_wrapper").on('click', 'div.db_record', function() {
    const custID = $(this).next(".customerID").text();
    console.log("Clicked record ID:", custID); // 输出对应客户的唯一 ID
  });
}
checkCustomerInformation();

? 关键点说明：

$(this) 指向被点击的 .db_record 元素；
.next(".customerID") 精准定位其直接后继兄弟节点（即紧挨着的 <span class="customerID"></span>），不会跨过其他 .db_record 去匹配；
该方案天然适配动态插入的 DOM，因事件委托绑定在父容器 .db_records_wrapper 上，无需重复绑定。

⚠️ 注意事项：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

确保 HTML 结构中 .customerID 始终紧跟在 .db_record 之后（如示例中 <div class="db_record">...</div> <span class="customerID">...</span>），否则 next() 将返回空 jQuery 对象（.text() 返回空字符串）；
若存在中间无关元素（如注释、文本节点或其它标签），可改用 nextAll(".customerID").first() 作为容错方案，但性能略低；
推荐为 .customerID 添加 data-customer-id 属性替代隐藏 <span></span>，语义更清晰且无需依赖 DOM 位置：
```
<div class="db_record" data-customer-id="<?php echo $cus_ID; ?>">...</div>
```
对应 JS 可简化为：$(this).data('customer-id')。