jQuery에서 버튼을 클릭하면 배열의 항목을 추가합니다.

사용자가 목록에서 선택하고 배열에 선택 항목을 포함시킨 다음 다른 목록에 배열을 표시 할 수있는 UI를 작성합니다. 나는 아주 가깝다. 그러나 목록에 항목을 추가 할 때마다 항목이 반복됩니다.jQuery에서 버튼을 클릭하면 배열의 항목을 추가합니다.

배열에서 배열을 다시 작성하기 전에 목록을 지우려면 어떻게합니까?

$(document).ready(function(){ 
 
    var a = []; 
 
    
 
    $(".btn").click(function(){ 
 
\t a.push($(this).next("span").text()); 
 
\t $(this).closest("li").hide(); 
 
    $("#s").text(a.join(" ")); 
 

 
    $.each(a, function(i){ 
 
     var cList = $('ul.mylist'); 
 
    \t var li = $('<li/>') 
 
     \t .addClass('ui-menu-item') 
 
      .attr('role', 'menuitem') 
 
      .appendTo(cList); 
 
     var aaa = $('<a/>') 
 
      \t .addClass('ui-all') 
 
      \t .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>

출처

2017-01-21 Jose Ruiz

배열의 모든 값을 반복해서 추가하는 각 함수를 만들기 때문에 처음에는 빈을 html로 비워야합니다. 그는 가치가있다. 현재 라이브 데모를 볼 수 있습니다 - https://jsfiddle.net/Arsh_kalsi01/15zhk00y/

$(document).ready(function(){ 
 
var a = []; 
 

 
    
 

 
$(".btn").click(function(){ 
 
    var obj = $(this); 
 
\t a.push(obj.next("span").text()); 
 
    console.log(a); 
 
\t obj.parent().hide(); 
 
    $("#s").text(a.join(" ")); 
 
$('ul.mylist').html(""); 
 
    $.each(a, function(i){ 
 
     var cList = $('ul.mylist'); 
 
    \t var li = $('<li/>') 
 
     \t .addClass('ui-menu-item') 
 
      .attr('role', 'menuitem') 
 
      .appendTo(cList); 
 
     var aaa = $('<a/>') 
 
      \t .addClass('ui-all') 
 
      \t .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>

출처

2017-01-21 05:04:56

당신은 $.empty을 사용할 수 있습니다 (documentation 참조) : 작동 여기 내 코드 방법

당신은 볼 수 있습니다.

선택한 노드의 내용을 비 웁니다.

배열에서 반복을 시작하기 전에 그렇게 할 수 있으며 코드는 예상대로 작동합니다.

$(document).ready(function(){ 
 
    var a = []; 
 
    
 
    $(".btn").click(function(){ 
 
\t a.push($(this).next("span").text()); 
 
\t $(this).closest("li").hide(); 
 
    $("#s").text(a.join(" ")); 
 

 
    // change here: 
 
    $('ul.mylist').empty(); 
 
    $.each(a, function(i){ 
 
     var cList = $('ul.mylist'); 
 
    \t var li = $('<li/>') 
 
     \t .addClass('ui-menu-item') 
 
      .attr('role', 'menuitem') 
 
      .appendTo(cList); 
 
     var aaa = $('<a/>') 
 
      \t .addClass('ui-all') 
 
      \t .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>

출처

2017-01-21 04:36:04 Alpha

내가 당신의 문제는 단지 null 또는 빈 배열을 넣어 고정 [] 버튼을 클릭 내부와 그 자체를 취소합니다;

$(document).ready(function(){ 
 
    var a = []; 
 
    
 
    $(".btn").click(function(){ 
 
    a=[]; 
 
\t a.push($(this).next("span").text()); 
 
\t $(this).closest("li").hide(); 
 
    $("#s").text(a.join(" ")); 
 

 
    $.each(a, function(i){ 
 
     var cList = $('ul.mylist'); 
 
    \t var li = $('<li/>') 
 
     \t .addClass('ui-menu-item') 
 
      .attr('role', 'menuitem') 
 
      .appendTo(cList); 
 
     var aaa = $('<a/>') 
 
      \t .addClass('ui-all') 
 
      \t .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>

출처

2017-01-21 04:38:02

그냥 빈 목록이 (필요가 각 요소에 대해 $.each 안에 다시 정의하지 있기 때문에 당신이 cList을 정의 갈까요 곳)는 $.each 전에 cList.html('')를 사용하여 추가 시작하기 전에 :

을

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

출처

2017-01-21 04:38:20

jQuery에서 버튼을 클릭하면 배열의 항목을 추가합니다.

답변

관련 문제