Question

我正在尝试使用jQuery的.next（）函数来获取class="inputfield"的下一个元素，但我得到的只是[]。

如果单击空单元格，则显示input元素（函数click_td（td_id）/ open_input（inputObj））。

当退出元素时，它会消失而留下文本（函数close_input（inputObj））。

按Tab键我想移动到下一个元素（函数next_cell（inputObj））。

谢谢，阿巴

<script language="javascript" type="text/javascript" src="/_inc/jquery/jquery.js"></script> 
    <style type="text/css">
    .inputfield{        
        display: none;
    }
    </style>
    <table cellspacing="0" cellpadding="2" border="1" width="50%">      
        <tr>
            <td width="15%">Name</td>
            <td width="35%" onclick="click_td(this)" id="1_1"><span id="si1_1" style=""></span><input type="text" onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" size="25" value="" name="name" id="i1_1" class="inputfield"></td>
            <td width="15%">E-mail</td>
            <td width="35%" onclick="click_td(this)" id="1_2"><span id="si1_2"></span><input type="text" onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" size="25" value="" name="email" id="i1_2" class="inputfield"></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td onclick="click_td(this)" id="2_1"><span id="si2_1"></span><input type="text" onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" size="25" value="" name="phone" id="i2_1" class="inputfield"></td>        
            <td>Type:<br>
            </td><td onclick="click_td(this)" id="2_2"><span id="si2_2"></span>
                <select onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" name="article_type" id="i2_2" class="inputfield">
                    <option value=""></option>
                    <option>Buying Guide</option>
                    <option>Announcement</option>
                    <option>Hands-on Review</option>
                </select>
            </td>
        </tr>
    </tbody>
    </table>

    <script LANGUAGE="JavaScript">
    <!--
    function click_td(td_id){
        var inputObj = document.getElementById('i' + td_id.id);
        open_input(inputObj)    
    }

    function open_input(inputObj){
        var spanObj = document.getElementById('s' + inputObj.id)    
        inputObj.style.display = 'block';
        spanObj.style.display = 'none';
        inputObj.focus();
    }

    function close_input(inputObj){
        var spanObj = document.getElementById('s' + inputObj.id)
        switch (inputObj.type){ 
            case 'select':
                spanObj.innerHTML = inputObj.options[inputObj.selectedIndex].value; 
                break;  
            case 'text':    
            default:
                spanObj.innerHTML = inputObj.value; 
                break;       
        }           
        inputObj.style.display = 'none';
        spanObj.style.display = '';
    }

    function next_cell(inputObj){   
        next_inputObj = $(inputObj).next('.inputfield');
                console.log(next_inputObj);
        open_input(next_inputObj)
    }
    </script>

Answer 1

我已经完成了我的小提琴工作以突出问题

http://jsfiddle.net/k77Ya/6/

var next_inputObj = $(inputObj).next('.inputfield');
console.log(next_inputObj.length);

基本上，它归结为.next（）运算符无法找到您建议的类。这是因为.next（）运算符将查找当前您所在的类“inputField”的下一项，当然，该类不存在，因此.next（）运算符始终返回空数组。

顺便说一句，您发布的HTML缺少一个开始标记，但这不是问题。如果将一些.parent（）运算符链接在一起，就可以获得正确的级别并从那里开始，例如。

var next_inputObj = $(inputObj).parent().next('.inputfield');

编辑：它现在几乎就在那里;你可以在顶部的两个框和底部的两个框之间切换。当你到达列表中的最后一个元素时，它需要一些额外的代码来导航到下一个。

其中一个问题是，按Tab键会触发模糊事件，这会影响在页面上输入之间切换选项卡的能力。我建议通过在事件上调用preventDefault（）方法来阻止此功能，如下所示。为了实现这一点，我在您的输入中复制代码时使用了jQuery事件处理程序 - 文档中的文档：http://api.jquery.com/blur/和http://api.jquery.com/keydown/

event.preventDefault（）;

现在应该提供一个有效的解决方案，希望有所帮助！

Answer 2

使用nextAll()：

DEMO

function open_input(inputObj){
    if(!$(inputObj).length) return;
    var spanObj = document.getElementById('s' + inputObj.id)    
    inputObj.style.display = 'block';
    spanObj.style.display = 'none';
    inputObj.click();
    setTimeout(function(){inputObj.focus()},0);
}

function next_cell(inputObj){   
    console.log(inputObj);
    var next_inputObj = $(inputObj).closest('td').nextAll('td').find('.inputfield')[0];
    open_input(next_inputObj)

}

jQuery .next（）没有返回下一个元素

2 个答案: