前のリスト項目を入力

Question

リストから入力ボックスの値を取得しようとしています。私はこのようにHTMLで動作するようにすることができます..

<div id='numbs'> 
    <input id='1'>enter value 
    <input id='2'>enter value 
</div> 

入力が一覧にある場合、私はこれを実行できません。
これは私のコードです。助けてくれてありがとう。私は非常にこれに新しいので、ロジックがジャックアップされている場合は私に知らせてください。

var lastl = parseInt($("input:last").attr('id')); 

$("input").live("click", function() { 
    if (this.id == lastl && ($(this).prev('input').attr('value') > 0)) { 
     lastl = lastl + 1; 
     $('#numbs').append('<input id=' + (lastl) + '> enter value'); 
    } 
}); 

jsfiddle

編集：私はこの形式

<ul id='numbs'> 
    <li><input id='1'>enter value</li> 
    <li><input id='2'>enter value</li> 
</ul> 

Answer 1

が見えるとき、彼らリスト内の最後のものをクリックします。

は注意すべきカップルの事があります。

1. 使用on代わりliveまたはdelegateの、古いのjQueryを使用する必要があるならば、live上delegateを好みます。
2. クリックイベントの代わりにフォーカスイベントを使用します。キーボードを使う方法を知っている人もいれば、キーボードを使わなければならない人もいます。その上、フォーカスはあなたの意図に適しているようです。
3. 一部のブラウザにはすべての数値のidという属性に問題があるため、使用しないことをお勧めします。
4. 前の項目のidを知る必要はありません。再生中の<input>要素の総数に基づいて次の数字を見つけることができます。

   $('#numbs').on('focus', 'input', function() { 
       var $inputs = $('#numbs').find('input'); 
       if($inputs.index(this) == $inputs.length - 1) { 
        var input = '<input id="input-' 
           + $inputs.length 
           + '">'; 
        $('#numbs').append('<li>' + input + '</li>'); 
       } 
   });​ 
   

   あなたは、彼らが<ul>内の最後の<input>を打ったときにアクションを取りたいのでindexを使用して正確にと言う：

   if($inputs.index(this) == $inputs.length - 1) 
   

   デモ私はこのようなものを使用したい

：http://jsfiddle.net/ambiguous/L2MDa/

Answer 2

この作品は考えに私のhtmlを作ることができるようにしたいですか？

var numbs = $('#numbs').on('focusin', 'input:text', function (e) { 
    var lastInput = numbs.find('input:text:last')[0]; 

    if (this === lastInput) { 
     numbs.append('<li><input /> enter value</li>'); 
    } 
}); 

また、あなたのフォームフィールドをタブで移動している可能性があるため、イベントをクリックからフォーカスに切り替えました。

Answer 3

あなたも、あなたの入力をナンバリングせずにこれを行うことができます：

<div id='numbs'> 
    <li><input>enter value</li> 
    <li><input>enter value</li> 
</div> 

 

$("#numbs").on("focus", 'input', function() { 
    var inputs = $('input'); 
    if (inputs.index(this) == inputs.length-1 && inputs.eq(inputs.length-2).val() > 0) { 
     $('#numbs').append('<li><input>enter value</li>'); 
    } 
}); 

例：あなただけの新しい<input>を追加しようとしているようhttp://jsfiddle.net/jtbowden/k4gMJ/