jQuery .next() не возвращает следующий элемент

Question

Я пытаюсь использовать функцию .next() jQuery для получения следующего элемента с class="inputfield", но все, что я получаю, это [].

Если вы нажмете на пустую ячейку, отобразится элемент ввода (функция click_td (td_id)/open_input (inputObj)).

При выходе из элемента он исчезает, оставляя текст (функция close_input (inputObj)).

Нажимая вкладку Я хочу перейти к следующему элементу (function 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'); 

EDIT: Это довольно много там сейчас; вы можете вставить вкладку между двумя боксами вверху и двумя внизу. Для перехода к следующему элементу в списке требуется дополнительный код для перехода к следующему.

Одна из проблем заключалась в том, что нажатие на вкладку вызывает событие размытия, которое влияет на возможность перехода между входами на странице. Я бы рекомендовал предотвратить эту функциональность, вызвав метод 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) 

}