jQuery获取动态id的办法

本文介绍了一种使用jQuery结合AngularJS动态获取元素ID的方法,并通过改变元素的类来实现某些功能。这种方法适用于需要根据不同ID动态调整页面样式的情况。

在开发中有时候会需要使用jQuery获取动态的id,下面是代码:

<div id="{{hospital.id + 'hospital'}}" class="z_tl z_t2 clearfix z_poaR" 
             ng-click="openDoctorList(hospital.id,hospital.name)">


$scope.openDoctorList = function (id,hospitalName) {
          $scope.uniqueHospitalId = id;
          var hospitalId = id + "hospital";
          if($scope.cacheHospitalId != id){
            $("#"+hospitalId).attr("class","z_tl clearfix z_poaR");
          }
          if($scope.cacheHospitalId == id){
            $("#"+hospitalId).attr("class","z_tl z_t2 clearfix z_poaR");
            $scope.doctorList = null;
          }
        $scope.cacheHospitalId = id;
      }

使用上面的办法,就可以实现动态获取id的需求

### jQuery 动态生成表格组件导致 `Invalid string length RangeError` 的解决方案 当使用 jQuery 动态生成大量 HTML 或者处理复杂 DOM 结构时,可能会遇到 `RangeError: Invalid string length` 错误。这种错误通常发生在字符串长度超出 JavaScript 引擎能够处理的最大范围的情况下[^1]。 以下是可能的原因以及对应的解决办法: #### 原因分析 1. **HTML 字符串过长** 如果通过拼接方式动态生成大量的 HTML 内容(例如表格),最终形成的字符串可能超过浏览器支持的最大长度,从而引发此错误。 2. **DOM 操作效率低下** 使用频繁的 `.append()` 方法逐行追加到 DOM 中会增加性能开销,并可能导致内存溢出或字符串超限问题。 3. **未优化的数据量过大** 当数据源非常庞大时,一次性渲染所有内容会导致资源占用过高,进而触发此类异常。 --- #### 解决方案 ##### 1. 减少单次操作的 HTML 长度 可以通过分批构建 HTML 来降低每次拼接的字符串大小。例如: ```javascript let batchSize = 100; // 每批次生成的行数 let rowsPerBatch = []; for (let i = 0; i < data.length; i++) { let rowHtml = `<tr><td>${data[i].id}</td><td>${data[i].name}</td></tr>`; rowsPerBatch.push(rowHtml); if ((i + 1) % batchSize === 0 || i === data.length - 1) { $("#tableBody").append(rowsPerBatch.join('')); rowsPerBatch = []; // 清空当前批次缓存 } } ``` 这种方法将大任务拆分为多个小任务执行,有效减少单次拼接的字符串长度[^1]。 --- ##### 2. 使用虚拟滚动技术 对于需要展示海量数据的情况,推荐采用虚拟滚动(Virtual Scrolling)。该技术仅加载可视区域内的数据项,其余部分则延迟加载或隐藏。这样既能提升页面响应速度,又能避免因过多 DOM 元素引起的性能瓶颈。 实现示例: ```html <div id="virtualTableContainer" style="height: 400px; overflow-y: auto;"></div> <script> const containerHeight = 400; const itemHeight = 50; function renderVisibleRows(data, scrollTop) { const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.ceil((scrollTop + containerHeight) / itemHeight); let visibleData = data.slice(startIndex, endIndex); let html = ''; for (let i = 0; i < visibleData.length; i++) { html += `<div class="row">${visibleData[i].name}</div>`; } $('#virtualTableContainer').empty().append(html); } $(document).ready(() => { let largeDataset = Array.from({ length: 1000 }, (_, index) => ({ id: index, name: `Item ${index}` })); $('#virtualTableContainer').on('scroll', function() { renderVisibleRows(largeDataset, this.scrollTop); }); }); </script> ``` 这种方式显著减少了实际渲染的内容数量,降低了发生 `RangeError` 的风险[^4]。 --- ##### 3. 替代纯字符串拼接的方式 如果仍然希望保留传统的动态生成逻辑,则建议改用模板引擎或者文档片段(Document Fragment)来替代原始字符串拼接法。例如: ```javascript // 创建 DocumentFragment 容器 let fragment = document.createDocumentFragment(); $.each(data, function(index, value) { let tr = $("<tr>"); tr.append(`<td>${value.id}</td>`); tr.append(`<td>${value.name}</td>`); fragment.appendChild(tr.get(0)); }); $("#tableBody")[0].appendChild(fragment); ``` 利用 `DocumentFragment` 可以批量更新 DOM 而无需多次重绘屏幕,同时也能规避潜在的大规模字符串连接隐患。 --- ##### 4. 数据预处理与压缩 在某些场景下,可以考虑对大数据集进行预处理后再传递给前端渲染模块。比如只传输必要的字段而非整个对象结构;又或者是借助服务器端分页机制逐步获取所需记录而不是一次性拉取全部结果[^2]。 --- ### 总结 针对由 jQuery 动态生成表格所引发的 `Invalid string length RangeError` ,可以从以下几个方面入手解决问题:一是调整代码策略以缩短单次操作涉及的 HTML 文本长度;二是引入更高效的 UI 组件库如 Virtual Scroll 实现按需加载功能;三是探索其他可行的技术手段像 Template Engine 和 Document Fragments 提升整体表现力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程之艺术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值