jQueryでボタンがクリックされたときに配列からアイテムをアイテムに追加します

ユーザーがリストから選択し、選択したものを配列に含めて別のリストに表示できるUIを構築しています。私はとても近くにいる。しかし、リストに項目を追加するたびに項目が繰り返されます。jQueryでボタンがクリックされたときに配列からアイテムをアイテムに追加します

アレイからビルドする前にリストをクリアするにはどうすればいいですか？

あなたはどのように動作し、私のコードここで見ることができます（documentationを参照してください）あなたは$.emptyを使用することができます

$(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

。

選択したノードの内容が空になります。

配列内での反復処理を開始する前に行うことができ、コードは期待どおりに動作します。

$(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.html('')を使用して、それに追加する開始する前に、ちょうど（あなたが各要素に対して$.eachの内側にそれを再定義する必要はありませんので、cListを定義shoud場所）のリストを空にする：

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でボタンがクリックされたときに配列からアイテムをアイテムに追加します

答えて

関連する問題