Django页面使用.children()遍历div子元素时丢失最后一个元素的问题

问题根源 #

你碰到的问题核心是**children()方法的局限性**：它只会抓取当前元素的直接子节点，不会深入到嵌套的子元素层级里。看你的HTML结构就能明白：

• 在mahal_questions里，mahal_id被包在<p>标签里，<p>是div的直接子元素，但mahal_id是<p>的子元素，所以$(div).children()只能拿到mahal_status、mahal_program和<p>标签本身，根本碰不到<p>里面的mahal_id。
• 同理，currently_serving_questions里的tafkid也嵌套在<p>里，自然也会被children()忽略。

解决方案 #

把children()换成find()方法就好——find()会递归查找当前元素下的所有后代元素。为了精准定位表单控件（避免清空非输入类元素），可以用:input选择器，它能匹配所有表单输入元素（input、select、textarea等）。

修改后的完整JS代码 #

$('#intake_form').submit(function() {
    var showhideDivList = document.getElementsByClassName("showHide_div");
    // 避免页面没有show/hide div时出错
    if (showhideDivList.length > 0) {
        // 遍历每个show/hide div
        Array.from(showhideDivList).forEach(function (div) {
            console.log(div);
            // 如果当前div是隐藏状态
            if ($(div).is(":hidden")){
                // 替换children()为find(':input')，获取所有表单输入元素
                var elements = $(div).find(':input');
                console.log("elements.length:" + elements.length);
                for (var i = 0; i < elements.length; i++) {
                    var element = elements.eq(i);
                    console.log(element);
                    console.log("value", element.val());
                    element.val("");
                    console.log("value", element.val());
                }
            }
        });
    }
});

额外优化小提示 #

如果你只想清空Django表单渲染的输入字段（比如排除按钮类元素），可以把选择器写得更精准：

var elements = $(div).find('input, select, textarea');

这样只会匹配常见的表单输入控件，避免误操作其他元素。

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