在jQuery中单击按钮时，将数组中的项目添加到列表中
[英]Add item from array to list when button is clicked in jQuery
问题描述
I'm building a UI where a user can select from a list, include the selection in an array and then display the array in another list. 
我正在构建一个UI，用户可以从列表中进行选择，将选择内容包括在数组中，然后在另一个列表中显示该数组。 I'm very close. 我很近 However, every time I add an item to the list it repeats items. 但是，每次我将一个项目添加到列表中时，它都会重复该项目。
How do I clear the list before it builds from the array again. 如何在再次从数组构建列表之前清除列表。
You can see how it works and my code here: 您可以在此处查看其工作方式和代码：
$(document).ready(function(){ var a = []; $(".btn").click(function(){ a.push($(this).next("span").text()); $(this).closest("li").hide(); $( "#s" ).text( a.join( " " ) ); $.each(a, function(i){ var cList = $('ul.mylist'); var li = $('<li/>') .addClass('ui-menu-item') .attr('role', 'menuitem') .appendTo(cList); var aaa = $('<a/>') .addClass('ui-all') .text(a[i]) .appendTo(li); }); }); });
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selector</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h2>List of Options</h2> <ul> <li><button class="btn">Select</button><span>One</span></li> <li><button class="btn">Select</button><span>Two</span></li> <li><button class="btn">Select</button><span>Three</span></li> <li><button class="btn">Select</button><span>Four</span></li> </ul> <h2>List of Selections</h2> <ul class="mylist"> </ul> <h2>Array</h2> <div>Array of Selected Items to Send to DB:</div> <span ID="s"></span> </body> </html>
4 个解决方案
解决方案1
1 2017-01-21 04:36:04
You can use $.empty (See documentation ). 您可以使用$.empty （请参阅文档 ）。
It will empty out the contents of the selected node. 它将清空选定节点的内容。
You can do that before you start iterating in the array and your code will behave as you expected it to. 您可以在开始对数组进行迭代之前执行此操作，并且代码将按预期的方式运行。
$(document).ready(function(){ var a = []; $(".btn").click(function(){ a.push($(this).next("span").text()); $(this).closest("li").hide(); $( "#s" ).text( a.join( " " ) ); // change here: $('ul.mylist').empty(); $.each(a, function(i){ var cList = $('ul.mylist'); var li = $('<li/>') .addClass('ui-menu-item') .attr('role', 'menuitem') .appendTo(cList); var aaa = $('<a/>') .addClass('ui-all') .text(a[i]) .appendTo(li); }); }); });
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selector</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h2>List of Options</h2> <ul> <li><button class="btn">Select</button><span>One</span></li> <li><button class="btn">Select</button><span>Two</span></li> <li><button class="btn">Select</button><span>Three</span></li> <li><button class="btn">Select</button><span>Four</span></li> </ul> <h2>List of Selections</h2> <ul class="mylist"> </ul> <h2>Array</h2> <div>Array of Selected Items to Send to DB:</div> <span ID="s"></span> </body> </html>
解决方案2
1 2017-01-21 04:38:20
Just empty the list before you start appending to it using cList.html('') before the $.each (where you shoud define cList because no need to redefine it inside $.each for each element): 只需清空列表，然后再在$.each之前使用cList.html('')将其追加到列表中$.each （此处应定义cList因为无需在$.each为每个元素重新定义$.each ）：
var cList = $('ul.mylist');
// clear the content of the list, now the list is empty and ready to be filled again
cList.html('');
$.each(a, function(i){
var li = $('<li/>')
.addClass('ui-menu-item')
.attr('role', 'menuitem')
.appendTo(cList);
var aaa = $('<a/>')
.addClass('ui-all')
.text(a[i])
.appendTo(li);
});
解决方案3
1 已采纳 2017-01-21 05:04:56
You have to empty the Ul html first because you make a each function which append all values of array again and again so it repeat the values. 您必须先清空Ul html，因为您要使每个函数一次又一次地追加array的所有值，以便它重复这些值。 You can see live demo here :- https://jsfiddle.net/Arsh_kalsi01/15zhk00y/ 您可以在此处观看现场演示：-https: //jsfiddle.net/Arsh_kalsi01/15zhk00y/
$(document).ready(function(){ var a = []; $(".btn").click(function(){ var obj = $(this); a.push(obj.next("span").text()); console.log(a); obj.parent().hide(); $( "#s" ).text( a.join( " " ) ); $('ul.mylist').html(""); $.each(a, function(i){ var cList = $('ul.mylist'); var li = $('<li/>') .addClass('ui-menu-item') .attr('role', 'menuitem') .appendTo(cList); var aaa = $('<a/>') .addClass('ui-all') .text(a[i]) .appendTo(li); }); }); });
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selector</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h2>List of Options</h2> <ul> <li><button class="btn">Select</button><span>One</span></li> <li><button class="btn">Select</button><span>Two</span></li> <li><button class="btn">Select</button><span>Three</span></li> <li><button class="btn">Select</button><span>Four</span></li> </ul> <h2>List of Selections</h2> <ul class="mylist"> </ul> <h2>Array</h2> <div>Array of Selected Items to Send to DB:</div> <span ID="s"></span> </body> </html>
解决方案4
0 2017-01-21 04:38:02
I fixed your issue just put the null or empty array a[] inside the button click and it will clear itself; 我解决了您的问题，只需将null或空数组a []放在按钮单击中，它将自动清除；
$(document).ready(function(){ var a = []; $(".btn").click(function(){ a=[]; a.push($(this).next("span").text()); $(this).closest("li").hide(); $( "#s" ).text( a.join( " " ) ); $.each(a, function(i){ var cList = $('ul.mylist'); var li = $('<li/>') .addClass('ui-menu-item') .attr('role', 'menuitem') .appendTo(cList); var aaa = $('<a/>') .addClass('ui-all') .text(a[i]) .appendTo(li); }); }); });
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selector</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h2>List of Options</h2> <ul> <li><button class="btn">Select</button><span>One</span></li> <li><button class="btn">Select</button><span>Two</span></li> <li><button class="btn">Select</button><span>Three</span></li> <li><button class="btn">Select</button><span>Four</span></li> </ul> <h2>List of Selections</h2> <ul class="mylist"> </ul> <h2>Array</h2> <div>Array of Selected Items to Send to DB:</div> <span ID="s"></span> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.