jquery each（）はすべてのオブジェクトを同じものとして返します

Question

免責事項、私は新人開発者ですが、私が行っているように学習しています。私は数日間、この問題を解決しようとしていますが、同様の問題を解釈しようとしていますが、無駄です。

問題です。私はリストを動的に生成し、それぞれ<li>には4つの入力フィールド、1つの選択ボックス、2つのチェックボックスがあります。各入力の値が入力され、ユーザーは変更できる必要があります。私はjQueryを使用してリストをループしてeach（）を使ってループし、値を返そうとしているので、各行のオブジェクトがname-> valueのペアで終わる配列/オブジェクトがあるので、ajaxを渡すことができます更新された入力フィールドを保存します。

ここでは、リストを作成するコードを示します。

echo'<li id= '.$list[id].' name="clubli" class="club"> 
<input type="text" name="displayorder" class="clubelement" style=" width:30px; text-align: center;" value="'.$list[display_order].'"; autofocus /> 
<input type="text" name="clubname" class="clubelement" value="'.$list[club_name].'" /><select id ="clubtype" name="clubtype" class="clubelement" style="width:130px;"> 
<option selected ="selected">'.$list[club_type].'</option> 
    <option id = "'.$results1[0]->id.'">'.$results1[0]->club_type.'</option> 
    <option id = "'.$results1[1]->id.'">'.$results1[1]->club_type.'</option> 
    <option id = "'.$results1[2]->id.'">'.$results1[2]->club_type.'</option> 
    <option id = "'.$results1[3]->id.'">'.$results1[3]->club_type.'</option> 
    <option id = "'.$results1[4]->id.'">'.$results1[4]->club_type.'</option> 
    <option id = "'.$results1[5]->id.'">'.$results1[5]->club_type.'</option> 
</select> 
<input style="text-align: center; width: 40px"; type="text" name="clubdist" class="clubelement" value= "'.$list[range_distance].'" /></option> 
<input type="checkbox"; name="inactive"; class="clubelement"; '.$active.' /><input type=checkbox name="remove" class="clubelement"; /> 
<div style="margin-bottom:1em"></div></li>'; 

は、ユーザーが次のようであるJSが呼び出されたボタンを保存を選択すると（ルーキーで穏やかになる）：

<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.12.0 /jquery.min.js"></script><script type="text/javascript"> 
function saveClubs() { 
    $userclubs = []; 
    $('.clubslist li').each(function(i) { 
     $id=$("[name='clubli']").attr('id'); 
     $displayorder= $("[name='displayorder']").val(); 
     $clubname= $("[name='clubname']").val(); 
     $clubtype= $("[name='clubtype']").val(); 
     $clubdist= $("[name='clubdist']").val(); 
     $clubinactive= $("[name='inactive']").is(":checked"); 
     $clubremove= $("[name='remove']").is(":checked"); 
    $userclubs.push({'id':$id, 'displayorder':$displayorder, 'clubname':$clubname, 'clubtype':$clubtype, 'clubdist':$clubdist, 'inactive':$clubinactive, 'remove':$clubremove}); 
}); 

はconsole.log（$ userclubsを）。

コンソールログには、「オブジェクト」「オブジェクト」「オブジェクト」「オブジェクト」の結果が表示されます。このオブジェクトは、リストに4行あります。しかし、各オブジェクトは同じ7つの入力として、リストのすべての最初の行になります。ループが期待された回数だけループしていても、ループは毎回最初の行を読み込んでいることを理解しています。どんな指針も大いに評価されるでしょう。

Answer 1

あなたは近くにあり、それらのクエリセレクタ（例えば、$displayorder= $("[name='displayorder']").val();）は最初の値と一致します。ループの繰り返しごとに、最初に一致したDOM要素のみを取得します。

これを修正するには、each()ループが現在反復処理中のDOM要素を参照する必要があります。このような何かが働くだろう：

function saveClubs() { 
    $userclubs = []; 
    $('.clubslist li').each(function(i) { 
     $id=$(this).attr('id'); 
     $displayorder= $(this).find("[name='displayorder']").val(); 
     $clubname= $(this).find("[name='clubname']").val(); 
     $clubtype= $(this).find("[name='clubtype']").val(); 
     $clubdist= $(this).find("[name='clubdist']").val(); 
     $clubinactive= $(this).find("[name='inactive']").is(":checked"); 
     $clubremove= $(this).find("[name='remove']").is(":checked"); 
    $userclubs.push({'id':$id, 'displayorder':$displayorder, 'clubname':$clubname, 'clubtype':$clubtype, 'clubdist':$clubdist, 'inactive':$clubinactive, 'remove':$clubremove}); 
}); 
} 

ここでは、それはあなたのPHPに基づいていくつかのテストデータを扱う見ることができますJSフィドル、の例です：https://jsfiddle.net/qg063zaL/

希望に役立つこと！ :-)