本文介绍一种使用 jQuery 逐行反转 <div> 内文本的简洁方案：对每行文本独立执行字符级反转（而非整段倒序），保持行序不变，确保每行从右向左阅读时语义正确。
本文介绍一种使用 jquery 逐行反转 `
` 内文本的简洁方案：对每行文本独立执行字符级反转（而非整段倒序），保持行序不变，确保每行从右向左阅读时语义正确。
要实现“按行反转文本”——即每行内部字符顺序完全颠倒，但各行之间的上下顺序保持不变（如第一行仍为第一行）——关键在于将每一行视为独立字符串进行 split('') → reverse() → join('') 操作，而非对整个容器内容统一处理。
以下是一个完整、可直接运行的 jQuery 解决方案：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="textContainer">
<div>apple orange banana</div>
<div>potato salad carrot</div>
<div>abcd efgh ijkl</div>
</div>
<script>
$(document).ready(function() {
$("#textContainer div").each(function() {
const originalText = $(this).text();
const reversedText = originalText.split('').reverse().join('');
$(this).text(reversedText);
});
});
</script>✅ 效果说明：
- 输入 apple orange banana → 输出 ananab egnaro elppa
- 行结构（换行位置）由 <div> 自然维持，无需额外处理换行符
- 所有空白符（空格、制表符等）均参与反转，因此单词间空格位置也会相应改变，符合题目中示例的预期行为
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 此方法仅适用于纯文本内容；若 <div> 内含 HTML 标签（如 <span> 或链接），$(this).text() 会剥离标签，导致结构丢失。如需保留 HTML 结构并仅反转文本节点，需改用 DOM 遍历方式（递归处理 Text 节点）。
- 原生 JavaScript 替代方案（无 jQuery 依赖）如下：
document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('#textContainer div').forEach(el => { el.textContent = el.textContent.split('').reverse().join(''); }); });
? 总结：该方案轻量、可靠、语义清晰，精准满足“每行独立字符反转”的需求，是处理多行文本镜像显示的理想选择。
