本文详解为何基于 jQuery 的复选框文本排序脚本在 Smarty foreach 循环渲染后失效，并提供可靠、兼容 Cyrillic 字符的 DOM 排序方案，避免重复元素与乱序问题。
本文详解为何基于 jquery 的复选框文本排序脚本在 smarty `foreach` 循环渲染后失效，并提供可靠、兼容 cyrillic 字符的 dom 排序方案，避免重复元素与乱序问题。
在使用 Smarty 模板引擎动态生成复选框列表时，开发者常希望通过 JavaScript 对 <label></label> 元素按其可见文本内容（尤其是西里尔字母，如俄文）进行升序排序。然而，直接将排序逻辑写在 foreach 循环内部或紧随其后的 <script></script> 标签中，往往导致排序无效——表面看 DOM 已渲染，但 jQuery .sort() 并未生效。根本原因在于：Smarty 是服务端模板引擎，foreach 渲染发生在 HTML 发送到浏览器之前；而 JavaScript 运行在客户端，若排序逻辑未确保 DOM 完全就绪且操作方式正确，极易出错。
? 问题根源分析
DOM 尚未稳定即执行排序
虽然$(document).ready()确保了 DOM 加载完成，但若复选框由 Smarty 动态生成（尤其在复杂页面或含异步组件时），仍可能存在微小时机差异。更关键的是：原代码使用$('#DivTipkatCheckboxList').append(sorted)—— 这本质是将已排序的 jQuery 对象重新追加到容器末尾，而非替换原始顺序。由于.sort()返回的是新顺序的 DOM 元素集合，但append()不会自动移除旧节点，导致重复渲染、顺序混乱甚至标签嵌套错乱。-
排序比较函数存在逻辑缺陷
原sortByText函数：return $.trim($(a).text()) > $.trim($(b).text());
该写法返回布尔值（
true/false），而 JavaScript 数组.sort()要求比较函数返回负数、零或正数，以明确a 、<code>a === b或a > b关系。布尔值会被强制转为1或0，导致排序结果不可预测（尤其对 Unicode 字符如西里尔文）。 .innerHTML直接拼接丢失事件绑定与属性状态
答案中建议的sorted[i].innerHTML方式虽能显示文本，但会剥离<input>的checked状态、class、data-*属性等，且破坏原有 DOM 引用关系，不推荐用于生产环境。
✅ 正确解决方案：安全、可维护的 DOM 重排
应采用标准 jQuery 排序模式：先清空容器，再批量插入已排序的原生 DOM 元素（保留所有属性和状态），并修正比较函数以支持 Unicode 字符串本地化排序：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
$(document).ready(function () {
// ✅ 修正：使用 localeCompare 支持西里尔字母等 Unicode 排序
var sortByText = function (a, b) {
const textA = $.trim($(a).text()).trim();
const textB = $.trim($(b).text()).trim();
// 使用 localeCompare 确保俄文、中文等正确排序
return textA.localeCompare(textB, 'ru-RU', { sensitivity: 'base' });
};
// ✅ 安全排序：获取所有 label，排序，清空容器，一次性追加
var $labels = $('#DivTipkatCheckboxList label');
var sortedLabels = $labels.sort(sortByText);
// 清空容器（保留 h3 等非 label 内容？需按需调整）
$('#DivTipkatCheckboxList').empty();
// 一次性追加所有已排序的 label 元素（保留完整 DOM 结构与状态）
$('#DivTipkatCheckboxList').append(sortedLabels);
});
</script>
⚠️ 注意事项：
localeCompare('ru-RU')显式指定俄语区域设置，确保西里尔字符按字典序正确比较；若需多语言兼容，可动态检测或使用'auto'。$('#DivTipkatCheckboxList').empty()会清除容器内所有子节点（包括<h3></h3>）。若需保留标题，建议将复选框包裹在独立容器中，例如：<div id="DivTipkatCheckboxList"> <h3>...</h3> <div id="CheckboxContainer"> <!-- 所有 label 放在此处 --> </div> </div>然后对
#CheckboxContainer执行排序操作。- 避免在 Smarty 循环内嵌入
<script></script>，应统一置于页面底部或外链 JS 文件中，确保执行时机可控。
? 总结
Smarty foreach 本身不影响前端排序逻辑，问题核心在于 JavaScript 操作 DOM 的方式是否严谨。正确做法是：
- 使用
localeCompare()替代>进行字符串比较； - 通过
.empty().append(sortedElements)实现原子性重排； - 将脚本置于
$(document).ready()中，并确保作用域精准（如限定label子元素）； - 如需服务端排序（更高效、SEO 友好），应在 PHP 层对
$ArrTipkat数组按$val.tipkat_name排序后再传入模板。
如此，无论数据量大小或字符集类型，复选框列表均可稳定、准确地按文本内容排序呈现。
