如何用Javascript/JQuery修改指定输入框前后元素的样式

由于原生DOM的previousSibling/nextSibling会返回空白文本节点（比如页面中的换行、空格），导致无法精准定位目标元素，建议使用JQuery的DOM遍历方法来处理，以下是可行代码：

情况1：目标输入框与.input-group、.input-group-btn为相邻兄弟元素 #

如果页面结构是输入框直接位于.input-group下方、.input-group-btn上方：

$(document).ready(function () {
    const $targetInput = $("#parentcustomerid_name");
    
    // 禁用输入框并调整样式
    $targetInput.prop("disabled", true)
                .css({
                    "padding": "0 0 0 12px",
                    "border": "1px solid #949494"
                });
    
    // 给上方紧邻的.input-group添加宽度样式
    $targetInput.prev(".input-group").css("width", "100%");
    // 如果.input-group不是紧邻输入框，改用：$targetInput.prevAll(".input-group").first().css("width", "100%");
    
    // 隐藏下方紧邻的.input-group-btn
    $targetInput.next(".input-group-btn").css("display", "none");
    // 如果.input-group-btn不是紧邻输入框，改用：$targetInput.nextAll(".input-group-btn").first().css("display", "none");
});

情况2：输入框嵌套在.input-group内部，.input-group-btn是其兄弟元素 #

如果页面结构是输入框在.input-group里，而.input-group-btn是.input-group的下一个兄弟元素：

$(document).ready(function () {
    const $targetInput = $("#parentcustomerid_name");
    
    // 禁用输入框并调整样式
    $targetInput.prop("disabled", true)
                .css({
                    "padding": "0 0 0 12px",
                    "border": "1px solid #949494"
                });
    
    // 找到输入框所在的.input-group父元素，设置宽度100%
    const $inputGroup = $targetInput.closest(".input-group");
    $inputGroup.css("width", "100%");
    
    // 找到.input-group下方的.input-group-btn并隐藏
    $inputGroup.next(".input-group-btn").css("display", "none");
});

核心逻辑说明 #

• JQuery的.prev()/.next()方法会自动忽略页面中的空白文本节点，直接定位相邻的元素节点，解决原生DOM方法的定位问题
• .prevAll(selector).first()/.nextAll(selector).first()用于定位非紧邻的最近匹配元素
• .closest(selector)用于查找当前元素的最近父级匹配元素，适合输入框嵌套在目标容器内的场景

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