通过JQuery修改含指定文本的bdi对应下一个input属性求助

原生JavaScript版本（无需依赖jQuery） #

直接复制到Tampermonkey新建脚本中，替换@match的URL为你的目标网站地址：

// ==UserScript==
// @name         Modify Truck No Input
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  定位"Truck No"对应的input并修改属性、添加datalist
// @author       Your Name
// @match        https://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 找到文本为"Truck No"的bdi元素
    const targetBdi = Array.from(document.querySelectorAll('bdi')).find(bdi => 
        bdi.textContent.trim() === 'Truck No'
    );

    if (targetBdi) {
        // 获取bdi的下一个兄弟input
        const truckInput = targetBdi.nextElementSibling;

        if (truckInput && truckInput.tagName === 'INPUT') {
            // 设置input属性
            truckInput.maxLength = 10; // 自定义最大长度
            truckInput.autocomplete = 'off';
            truckInput.setAttribute('list', 'truck-datalist');

            // 创建datalist并添加选项
            const datalist = document.createElement('datalist');
            datalist.id = 'truck-datalist';
            // 自定义卡车编号选项
            const truckOptions = ['TRK-001', 'TRK-002', 'TRK-003', 'TRK-004'];
            truckOptions.forEach(opt => {
                const option = document.createElement('option');
                option.value = opt;
                datalist.appendChild(option);
            });

            // 把datalist插入到input的父容器中
            truckInput.parentElement.appendChild(datalist);
        }
    }
})();

jQuery版本（如果你习惯用jQuery） #

需要先引入jQuery依赖，同样替换@match的URL：

// ==UserScript==
// @name         Modify Truck No Input (jQuery)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  定位"Truck No"对应的input并修改属性、添加datalist
// @author       Your Name
// @match        https://your-target-website.com/*
// @require      https://code.jquery.com/jquery-3.7.1.min.js
// @grant        none
// ==/UserScript==

(function($) {
    'use strict';

    // 筛选出包含"Truck No"的bdi
    const $targetBdi = $('bdi').filter(function() {
        return $(this).text().trim() === 'Truck No';
    });

    if ($targetBdi.length) {
        const $truckInput = $targetBdi.next('input');
        if ($truckInput.length) {
            // 批量设置input属性
            $truckInput.attr({
                'maxlength': 10,
                'autocomplete': 'off',
                'list': 'truck-datalist'
            });

            // 创建并插入datalist
            const $datalist = $('<datalist id="truck-datalist"></datalist>');
            const truckOptions = ['TRK-001', 'TRK-002', 'TRK-003'];
            truckOptions.forEach(opt => {
                $datalist.append(`<option value="${opt}"></option>`);
            });
            $truckInput.parent().append($datalist);
        }
    }
})(jQuery);

适配动态加载内容的情况 #

如果目标bdi和input是页面加载后动态生成的，需要添加轮询检查逻辑：

// ==UserScript==
// @name         Modify Truck No Input (Dynamic Content)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  适配动态加载的"Truck No" input修改
// @author       Your Name
// @match        https://your-target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function updateTruckInput() {
        const targetBdi = Array.from(document.querySelectorAll('bdi')).find(bdi => 
            bdi.textContent.trim() === 'Truck No'
        );

        if (targetBdi) {
            const truckInput = targetBdi.nextElementSibling;
            // 只处理未设置过datalist的input，避免重复操作
            if (truckInput && truckInput.tagName === 'INPUT' && !truckInput.getAttribute('list')) {
                truckInput.maxLength = 10;
                truckInput.autocomplete = 'off';
                truckInput.setAttribute('list', 'truck-datalist');

                const datalist = document.createElement('datalist');
                datalist.id = 'truck-datalist';
                const truckOptions = ['TRK-001', 'TRK-002', 'TRK-003'];
                truckOptions.forEach(opt => {
                    const option = document.createElement('option');
                    option.value = opt;
                    datalist.appendChild(option);
                });
                truckInput.parentElement.appendChild(datalist);

                // 找到元素后停止轮询
                clearInterval(checkTimer);
            }
        }
    }

    // 每隔500ms检查一次，直到找到目标元素
    const checkTimer = setInterval(updateTruckInput, 500);
})();

注意事项 #

• 替换@match中的URL为你实际需要操作的网站地址
• 如果bdi文本不是精确匹配（比如有多余空格、大小写差异），可以把判断条件改成bdi.textContent.trim().includes('Truck No')
• 自定义maxLength的数值和datalist里的选项内容，根据你的需求调整

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