循环DOM元素获取innerHTML失败，我的jQuery代码为何不生效？求解析

咱先拆解下你代码里导致无法正常运行的几个关键问题：

1. 错误使用for...in遍历jQuery对象 #

你用for (var title in titles)来遍历$('.collapseTitle')返回的jQuery对象，但jQuery对象是类数组结构，for...in会遍历它的所有枚举属性（包括jQuery自带的方法、原型链上的属性），而不是你要的DOM元素。这时候title拿到的是属性名（比如数字索引、"length"、"each"这些），不是jQuery包装的DOM元素，调用title.html()自然会报错。

2. indexOf的逻辑判断错误 #

你写的title.html().indexOf("(CSR)" || "(ADMIN)")逻辑不对，"(CSR)" || "(ADMIN)"会直接返回第一个真值"(CSR)"，相当于只判断了是否包含"(CSR)"，完全忽略了"(ADMIN)"的判断。

3. HTML标签的转义问题 #

你用<和>转义标签，但在jQuery的append方法里直接写正常的HTML标签就行，转义后会把<和>当成纯文本输出，而不是渲染成input元素。

修复后的代码 #

用jQuery的.each()方法来遍历元素才是正确的姿势，同时修正判断逻辑：

function createInputsForWebAppRemotes() { 
    $('.collapseTitle').each(function() { 
        var titleText = $(this).html();
        console.log(titleText);
        // 分别判断是否包含两个关键词，也可以用正则简化
        if (titleText.indexOf("(CSR)") !== -1 || titleText.indexOf("(ADMIN)") !== -1) { 
            $('#remoteWebAppDiv').append('<input class="form-control" name="remoteWebAppUrl" type="url"/>'); 
        } 
    }); 
}

替代方案：普通for循环 #

如果你习惯用普通for循环，也可以这样写（因为jQuery对象支持按索引访问）：

function createInputsForWebAppRemotes() { 
    var titles = $('.collapseTitle');
    for (var i = 0; i < titles.length; i++) { 
        var titleText = $(titles[i]).html();
        console.log(titleText);
        if (titleText.indexOf("(CSR)") !== -1 || titleText.indexOf("(ADMIN)") !== -1) { 
            $('#remoteWebAppDiv').append('<input class="form-control" name="remoteWebAppUrl" type="url"/>'); 
        } 
    } 
}

这样就能正常遍历所有.collapseTitle元素，判断文本内容并添加对应的input啦～

内容的提问来源于stack exchange，提问作者user9729328