在jQuery中单击按钮时，将数组从数组添加到列表中

时间：2017-01-21 04:21:19

标签： javascript jquery

我正在建立一个用户可以从列表中选择的UI，在数组中包含选择，然后在另一个列表中显示该数组。我非常接近。但是，每次我将一个项目添加到列表时，它都会重复项目。

如何再次从阵列构建之前清除列表。

您可以在此处查看其工作原理和代码：

＆＃13;
＆＃13; 
$(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);      
        });   
    });
});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您可以使用$.empty（请参阅documentation）。

它将清空所选节点的内容。

您可以在开始迭代数组之前执行此操作，并且您的代码将按预期运行。

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

答案 1 :(得分：1)

只需清空列表，然后在cList.html('')之前使用$.each向其添加cList，因为无需在$.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); }); 重新定义元素）：

{{1}}

答案 2 :(得分：1)

你必须首先清空Ul html因为你创建了一个一次又一次追加数组所有值的函数，所以它重复了这些值。 你可以在这里看到现场演示： - 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>

答案 3 :(得分：0)

我修复了你的问题，只需在按钮点击中放入null或空数组[]，它就会自行清除; 

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

相关问题
最新问题