如何使用jquery仅将数据附加一次
[英]How to append data only once using jquery
问题描述
Below is the my code for clicking functionality of tabs. 
下面是我点击标签功能的代码。
<body>
<div class="row-fluid">
<div class="span1 offset1">
<div class="tabbable" align="center">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a>
</li>
<li><a href="#tabs-2">Drink</a>
</li>
</ul>
</div>
</div>
<div id="1"></div>
</div>
<script type="text/javascript">
$("a[href=#tabs-1]").click(function() {
for (i = 0; i < mytabs.length; i++) {
$('div').append("<br>" + mytabs[i] + "<br>");
}
});
</script>
</body>
And here I am using javascript to store the values of tabs in array 在这里，我使用javascript将制表符的值存储在数组中
<script>
$(function() {
$("#tabbable").tabs();
});
var i;
var mytabs = new Array();
mytabs[0] = "Saab";
mytabs[1] = "Volvo";
mytabs[2] = "BMW";
</script>
Now I want that after clicking on tabs the values stored in data should get displayed. 现在，我希望在单击选项卡后，应该显示存储在数据中的值。 But what my code is doing , It is showing the data as many times as the data is stored in array. 但是我的代码正在做什么，它将数据显示为数据存储在数组中的次数。 Means I want output as Saab,Volvo,BMW but is displaying it three times. 意味着我想要输出为Saab，Volvo，BMW，但要显示三遍。 Can anyone help me in this that what to use instead of append so that i get the desired output. 谁能帮我这个用什么代替追加，以便我得到想要的输出。
5 个解决方案
解决方案1
3 已采纳 2013-08-22 10:09:00
Try using jQuery.one http://jsfiddle.net/adiioo7/UFBzn/1/ 尝试使用jQuery.one http://jsfiddle.net/adiioo7/UFBzn/1/
JavaScript:- JavaScript的： -
var i;
var mytabs = new Array();
mytabs[0] = "Saab";
mytabs[1] = "Volvo";
mytabs[2] = "BMW";
$(function () {
$(".tabbable").tabs();
$("a[href^=#tabs-]").one("click", function () {
for (i = 0; i < mytabs.length; i++) {
$($(this).attr("href")).append("<br>" + mytabs[i] + "<br>");
}
});
});
HTML:- HTML： -
<div class="row-fluid">
<div class="span1 offset1">
<div class="tabbable" align="center">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a>
</li>
<li><a href="#tabs-2">Drink</a>
</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
</div>
</div>
解决方案2
2 2013-08-22 09:59:02
Quick and dirty, but does the job 快速而肮脏，但做的工作
$('div#1').empty();
for (i=0;i<mytabs.length;i++)
$('div#1').append('<br/>' + mytabs[i] + '<br/>');
It will clear the div before adding content. 它会在添加内容之前清除div。 Is this what you're asking for? 这是你要的吗？
解决方案3
2 2015-05-15 14:08:29
This works for me: $('div#1').empty(); 这对我有用：$（'div＃1'）。empty（）; $('div#1').append('your code here'); $（'div＃1'）。追加（'你的代码在这里'）;
解决方案4
1 2013-08-22 10:13:41
Try this 尝试这个
Your html has 3 div elements . 您的html有3个div元素。 First of all make sure where you want (in which Div) you want to append the tabs.Below code will append tabs in div with id="1" .Other wise it will append in all the div s. 首先确保你想要的地方（在哪个Div中）你想要附加tab.Below代码将在div中附加id =“1”的标签。否则它将附加在所有div中。
<script type="text/javascript">
$("a[href=#tabs-1]").click(function()
{
$('div#1').empty();
for (i=0;i<mytabs.length;i++)
{
$('div#1').append("<br>"+mytabs[i]+"<br>");
}
});
</script>
解决方案5
-1 2013-08-22 10:00:15
尝试这个：
$('div').html("<br>"+mytabs[i]+"<br>");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.