[英]jQuery each loop give only first result
我正在尝试生成要通过jQuery提交给ajax调用的数组。 这是我的HTML和JavaScript:
//Following is the JavaScript I use to generate the variables from checked checkboxes jQuery(document).on("click", ".refno", function() { var ref = jQuery(this).data("ref"); var refindex = jQuery(this).data("refindex"); var i = 0; var tutelists = []; var tutearray = {}; jQuery('.datarefindex_' + refindex).each(function() { var subjid = jQuery(this).data("subjid"); i++; tutearray["id"] = subjid; tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() { return this.value; }).get(); }); tutelists.push(tutearray); var tutelists = JSON.stringify(tutelists); jQuery("#responsecontainer").html(tutelists); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <a href="javascript:void(0)" class="refno" data-refindex="1" data-ref="1105898">1105898</a> <ul> <li> <div>Title 1</div> <ul class="datarefindex_1" data-subjid="opt471821"> <li> <label class="tutebtn" for="1_opt471821_1"> <input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label> </li> <li> <label class="tutebtn" for="1_opt471821_2"> <input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label> </li> </ul> </li> <li> <div>Title 2</div> <ul class="datarefindex_1" data-subjid="opt1215754"> <li> <label class="tutebtn" for="1_opt1215754_1"> <input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label> </li> <li> <label class="tutebtn" for="1_opt1215754_2"> <input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label> </li> </ul> </li> <li> <div>Title 3</div> <ul class="datarefindex_1" data-subjid="opt3062581"> <li> <label class="tutebtn" for="1_opt3062581_1"> <input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label> </li> <li> <label class="tutebtn" for="1_opt3062581_2"> <input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label> </li> </ul> </li> </ul> <div id="responsecontainer"></div >
我收到的结果如下(我已经选中了每个列表的前三个框);
{"id":"opt3062581","issuedtutes1":["1","2","3"],
"issuedtutes2":["1","2","3"],
"issuedtutes3":["1","2","3"]}
然而,期望的结果如下:
{"id":"opt471821","issuedtutes":["1","2","3"]},
{"id":"opt1215754","issuedtutes":["1","2","3"]},
{"id":"opt3062581","issuedtutes":["1","2","3"]}
无法弄清楚我想念的是什么。 当我从函数中删除id
部分时,这将返回{"id":"opt3062581","issuedtutes":["1","2","3"]}
,这是最后一个列表中的数据。 请帮忙。
声音列表的数量是动态的,并且不是固定的。
您的预期输出看起来像一个对象列表,因此tutelists
应该是一个列表而不是对象。
jQuery(document).on("click", ".refno", function() { var ref = jQuery(this).data("ref"); var refindex = jQuery(this).data("refindex"); var i = 0; var tutelists = []; jQuery('.datarefindex_' + refindex).each(function() { var subjid = jQuery(this).data("subjid"); i++; var tutearray = {}; tutearray["id"] = subjid; tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() { return this.value; }).get(); tutelists.push(tutearray); }); var tutelists = JSON.stringify(tutelists); jQuery("#responsecontainer").html(tutelists); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:void(0)" class="refno" data-refindex="1" data-ref="1105898">1105898</a> <ul> <li> <div>Title 1</div> <ul class="datarefindex_1" data-subjid="opt471821"> <li> <label class="tutebtn" for="1_opt471821_1"> <input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label> </li> <li> <label class="tutebtn" for="1_opt471821_2"> <input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label> </li> </ul> </li> <li> <div>Title 2</div> <ul class="datarefindex_1" data-subjid="opt1215754"> <li> <label class="tutebtn" for="1_opt1215754_1"> <input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label> </li> <li> <label class="tutebtn" for="1_opt1215754_2"> <input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label> </li> </ul> </li> <li> <div>Title 3</div> <ul class="datarefindex_1" data-subjid="opt3062581"> <li> <label class="tutebtn" for="1_opt3062581_1"> <input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label> </li> <li> <label class="tutebtn" for="1_opt3062581_2"> <input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label> </li> </ul> </li> </ul> <div id="responsecontainer"></div >
您的id
值将替换为新的id
值。 请尝试使用array的push()
方法使其可行。
jQuery(document).on("click", ".refno", function () {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists =[];
tutelistElement = {};
jQuery('.datarefindex_'+ refindex ).each(function(){
var subjid = jQuery(this).data("subjid");
i++;
tutelistElement["id"] = subjid;
tutelistElement["issuedtutes"+i] = jQuery("input[name=tuteset_"+refindex+"_"+subjid+"]:checked").map(function () { return this.value; }).get();
});
tutelists.push(tutelistElement);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.