jquery each（）返回所有对象相同

免责声明，我是一名菜鸟开发人员，但我一直在学习。我一直在研究这个问题几天，试图解释类似的问题，但无济于事。jquery each（）返回所有对象相同

问题所在。我动态生成一个列表，每个<li>有4个输入字段，1个选择框和2个复选框。每个输入的值都被填充，用户应该能够修改。在保存我试图使用jquery遍历列表使用each（）并返回值，所以我可以推入和数组/对象结束与每个行的对象与名称 - >值对，所以我可以通过与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个输入 - 列表中的第一行。我知道循环每次读取第一行，即使它循环了预期的次数。任何指导将不胜感激....

来源

2016-03-31 oldnewbe

您在'each（）'循环中使用选择器，所以它只选择第一个匹配项。你想使用'$（this）'。 –

啊，是的，我确实读过每个（）选择第一个匹配，因此它只是在第一个列表元素上循环....感谢提示。我可以追求这一点。 – oldnewbe

不完全.....'each（）* * *循环遍历所有'li'元素，但循环内部的查询选择器*仅从它们匹配的第一个元素获取数据。我做了这个例子来帮助说明：https://jsfiddle.net/4sL0fmz9/给它一个运行并看看控制台。 –

你近了，他们的查询选择器（例如$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}); 
}); 
}

这里是在JS小提琴，在那里你可以看到它与基于PHP的一些测试数据工作的例子：https://jsfiddle.net/qg063zaL/

希望帮助！ :-)

来源

2016-03-31 22:49:19

您经过数小时的奋斗后，在7分钟内解决了我的问题。这个菜鸟不够感谢你。 – oldnewbe

太棒了。很高兴它对你有效：-） –

jquery each（）返回所有对象相同

回答

相关问题