jquery each() tüm nesneleri aynı

Question

Sorumluluk reddi olarak döndürür, ben bir çaylak geliştiriciyim ama ben giderken öğreniyorum. Bu sorunu bir kaç günlüğüne, benzer problemleri yorumlamaya çalışıyorum ama boşuna çalışıyorum.

Sorun. Dinamik olarak bir liste oluşturuyorum ve her biri <li>'un 4 giriş alanı, 1 seçim kutusu ve 2 onay kutusu vardır. Her bir girdi için değerler doldurulur ve kullanıcılar değiştirebilmelidir. Kaydetmek için jquery'yi her bir() kullanarak listedeki döngüye girmeye çalışıyorum ve değerleri atarım. Böylece, her satır için isim-> değer çiftleri ile bir nesne ile biten bir dizi ve nesneye son verebilirim ve böylece ajax ile geçiş yapabilirim ve güncellenen giriş alanlarını kaydedin.

İşte liste oluşturan kod.

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>'; 

kullanıcı şu şekildedir bir JS denir kaydet düğmesini seçtiğinde (çaylak nazik davran):

<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);

Konsol günlüğü, listeye 4 satır olduğu için beklenen "object" "object" "object" "nesnesi" sonucunu gösterir. Ancak her nesne, aynı 7 girdi olarak girdi - listenin ilk satırı. Döngünün beklenen sayıyı döngüler olsa bile ilk satırın her zaman okuduğunu anlıyorum. Herhangi bir rehberlik büyük ölçüde takdir edilecektir ....

Answer 1

Sen yakın, onlar sorgu seçiciler (örneğin, $displayorder= $("[name='displayorder']").val();) ilk değeri eşleşecek. Bu nedenle, döngüdeki her yineleme için sadece ilk eşleşen DOM öğesini edinirsiniz.

Bunu düzeltmek için, each() döngüsünün şu anda yinelendiği DOM öğesine başvurmanız gerekir. Böyle bir şey çalışacak: yardımcı https://jsfiddle.net/qg063zaL/

Hope:

İşte

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}); 
}); 
} 

Eğer bu sizin PHP dayalı bazı test verileri ile çalışan görebileceğiniz bir JS Fiddle, bir örnektir! :-)