JQuery .nextAll (尝试从DOM中获取下一个输入的值)返回"undefined“

基础概念

jQuery .nextAll() 方法用于获取匹配元素集合中每个元素的所有跟随的同胞元素。如果提供了选择器，则只返回匹配该选择器的同胞元素。

问题分析

当你使用 jQuery .nextAll() 方法尝试获取下一个输入元素的值时，返回 "undefined"，这通常意味着以下几种情况之一：

没有找到匹配的元素：.nextAll() 没有找到任何后续的同胞元素，或者找到的元素不是输入元素。
选择器不正确：可能没有正确指定选择器来匹配输入元素。
执行时机不对：可能在 DOM 尚未完全加载时尝试访问元素。

解决方案

1. 确保 DOM 已完全加载

确保在 DOM 完全加载后再执行 jQuery 代码。可以将代码放在 $(document).ready() 中：

$(document).ready(function() {
    var nextInputValue = $('selector').nextAll('input').first().val();
    console.log(nextInputValue);
});

2. 检查选择器

确保选择器正确无误。例如，如果你想获取某个特定元素后面的第一个输入框的值，可以这样做：

$(document).ready(function() {
    var nextInputValue = $('#specificElement').nextAll('input').first().val();
    console.log(nextInputValue);
});

3. 调试和验证

使用 .length 属性来检查是否找到了元素：

$(document).ready(function() {
    var nextInputs = $('#specificElement').nextAll('input');
    if (nextInputs.length > 0) {
        var nextInputValue = nextInputs.first().val();
        console.log(nextInputValue);
    } else {
        console.log('No input elements found after the specified element.');
    }
});

示例代码

假设 HTML 结构如下：

<div id="container">
    <button id="specificElement">Click Me</button>
    <p>Some text</p>
    <input type="text" id="nextInput" value="Hello World">
</div>

对应的 jQuery 代码：

$(document).ready(function() {
    $('#specificElement').click(function() {
        var nextInputValue = $(this).nextAll('input').first().val();
        alert(nextInputValue); // 应该显示 "Hello World"
    });
});