如何为每个.block区块的首个input绑定jQuery onkeyup事件

算力阿峰

2026-5-25

实现每个.block区块首个input的keyup事件绑定

没问题，这事儿很简单，用jQuery就能轻松搞定，我给你两种实用的实现方式，按需选择就行：

方式一：直接用选择器定位目标元素

这种方式最简洁，直接通过层级选择器选中每个.block下的第一个直接子元素input，然后批量绑定事件：

// 确保DOM加载完成后执行代码
$(document).ready(function() {
    $('.block > input:first-child').on('keyup', function() {
        // 这里写你要执行的逻辑，比如获取当前输入值
        const inputValue = $(this).val();
        console.log('首个输入框内容变化：', inputValue);
        // 其他业务逻辑...
    });
});

说明：

.block > input:first-child：精准匹配每个.block容器下的第一个直接子元素input，避免选中嵌套在其他元素里的input
$(this)在事件回调中代表当前触发keyup事件的那个input元素，方便你操作当前输入框的值或属性

方式二：遍历区块再绑定事件

如果需要对每个.block做额外判断（比如先检查区块里是否存在input），可以用.each()遍历每个区块，再定位首个input：

$(document).ready(function() {
    $('.block').each(function() {
        // 找到当前区块里的第一个input
        const firstInput = $(this).find('input:first');
        // 可选：判断是否存在input再绑定事件，避免无效操作
        if (firstInput.length > 0) {
            firstInput.on('keyup', function() {
                console.log('当前区块首个输入框内容：', $(this).val());
                // 你的业务逻辑...
            });
        }
    });
});