- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
JQuery [HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery
2021.06.01 17:39
[HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery
[Qustion]
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. 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>
[Answer]
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. You can see live demo here :-
$(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>
[출처] https://stackoverflow.com/questions/41775694/add-item-from-array-to-list-when-button-is-clicked-in-jquery
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
