如何使用jquery只追加一次数据
How to append data only once using jquery
下面是我用于单击选项卡功能的代码。
<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>
在这里,我使用javascript将选项卡的值存储在数组中
<script>
$(function() {
$("#tabbable").tabs();
});
var i;
var mytabs = new Array();
mytabs[0] = "Saab";
mytabs[1] = "Volvo";
mytabs[2] = "BMW";
</script>
现在,我希望在单击选项卡后,应该显示存储在数据中的值。但我的代码所做的是,它显示数据的次数与数据存储在数组中的次数一样多。意味着我想输出萨博,沃尔沃,宝马,但显示了三次。有人能在这方面帮助我使用什么而不是附加,这样我就能得到想要的输出吗。
尝试使用jQuery.one
http://jsfiddle.net/adiioo7/UFBzn/1/
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:-
<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>
快速而肮脏,但能完成的工作
$('div#1').empty();
for (i=0;i<mytabs.length;i++)
$('div#1').append('<br/>' + mytabs[i] + '<br/>');
它将在添加内容之前清除div。这就是你想要的吗?
这对我很有用:$('div#1').empty();$('div#1').append('yourcodehere');
试试这个
您的html有3个div元素。首先,请确保要将选项卡附加到所需的位置(在哪个Div中)。下面的代码将在id="1"的div中附加制表符。否则,它将在所有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>
试试这个:
$('div').html("<br>"+mytabs[i]+"<br>");
相关文章:
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- Jquery 循环一次或在数据数组中显示一次数据
- 如果发现任何数据,如何停止每7秒运行一次的函数
- Ajax 使用函数每秒获取一次 php 数据
- jqueryhttp将数据发布到整个数组,一次发送一个
- 将数据加载到本地存储一次
- 在用户为下一次输入插入数据后清空文本字段
- 如何在用户滚动到页面底部时仅加载一次数据
- 一次打开一行详细信息数据表
- 如何使用上一次调用的数据进行第二次 JS .post 调用
- Socket.io - 每 34 毫秒接收一次数据
- Canvas getImageData() 为了获得最佳性能.提取所有数据或一次提取一个数据
- 如何使用jquery只追加一次数据
- 在Angular 2中,使用observable获取一次数据
- 从2个可观测对象中获取一次数据
- 在Firebase中只检索一次数据
- 每分钟更换一次数据集
- 通过socket.io每隔10秒发送一次数据
- 如何使用jQuery单击后仅附加一次数据