jQuery 獲取 TD 內文本並截取：each 遍歷與 html/text 方法正確用法

問題代碼分析

$("td[flag='title']").each(function(){
    $(this).html(cutString($(this).html(), 5, "..."));
});

TD 結構：<td flag='title'>標題內容<a ...>|結果查看|</a></td>

關鍵問題

1. $(this).html() 獲取包含標簽的 HTML 字符串，截取後可能破壞標簽結構（如截斷 <a> 標簽）。
2. 直接 .html(newHtml) 重寫會導致事件綁定丟失、輸入框值重置等副作用。
3. 需針對純文本節點截取，保留子元素完整。

正確實現：文本節點遍歷截取

function truncateTextNodes(container, maxLen, suffix) {
    container.contents().each(function() {
        if (this.nodeType === Node.TEXT_NODE) {
            var text = this.nodeValue;
            if (text.length > maxLen) {
                this.nodeValue = text.substring(0, maxLen) + suffix;
            }
        } else if (this.nodeType === Node.ELEMENT_NODE) {
            // 遞歸處理子元素（可選：跳過 a、button 等交互元素）
            if (!$(this).is('a, button, input, select')) {
                truncateTextNodes($(this), maxLen, suffix);
            }
        }
    });
}

$("td[flag='title']").each(function() {
    truncateTextNodes($(this), 5, "...");
});

簡化版（僅截取首個文本節點）

$("td[flag='title']").each(function() {
    var $td = $(this);
    // 克隆 TD，移除子元素獲取純文本
    var clone = $td.clone();
    clone.find('a, button, input').remove();
    var pureText = clone.text().trim();
    if (pureText.length > 5) {
        // 僅修改首個文本節點
        var firstTextNode = $td.contents().filter(function() {
            return this.nodeType === Node.TEXT_NODE;
        }).first();
        if (firstTextNode.length) {
            firstTextNode[0].nodeValue = pureText.substring(0, 5) + "...";
        }
    }
});

工具函數 cutString 參考實現

function cutString(str, len, suffix) {
    if (!str || str.length <= len) return str;
    return str.substring(0, len) + (suffix || "");
}

最佳實踐總結

• 優先操作 nodeValue 修改文本節點，保留 DOM 結構與事件。
• 使用 .text() 獲取純文本長度判斷，.html() 僅用於需保留標簽的場景。
• 截取邏輯封裝為可復用函數，支持配置長度、後綴、排除標簽選項。