如何在Jquery中附加两个变量？
[英]How to append two variables inside Jquery?
问题描述
I have some data in Json. 
我在Json中有一些数据。 For example, consider endtime=316 , starttime=420 . 例如，考虑endtime=316 ， starttime=420 。 So what I need is I want to subtract this data and display it in my html page. 所以我需要减去这些数据并将其显示在html页面中。 I am getting subtracted values in alert but not able to append this data to the html page using jQuery . 我在警报中减去了值，但无法使用jQuery将此数据附加到html页面。
HTML 的HTML
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
<div data-role="content" class="ui-content">
<ul data-role="listview" class="ui-listview" id="ball">
</ul>
</div>
</div>
</body>
</html>
Javascript Java脚本
var content='';
$.each(data,function(index,item){
var count = parseInt(item.endtime)-parseInt(item.starttime);
content += '<li><a href="index.html"><img src="'+item.thumb+'" class="userimage">';
count += '<span class="secondsbox" style="position:absolute; width:28px; height:15px; background: #485ac8; margin-top: 54px; margin-left: -4px;"><span style="position:absolute; font-size:12.52px; margin-left: 5px; color:#FFF; margin-top: -1px;" id="secdisplay"></span></span>';
content += '<h3 class="userurl">'+item.keywords+'</h3>';
content +='<p class="username">'+item.bombscount+'</p></a></li>';
});
$('#ball').append(content);
$('#ball').append(count);
$('#ball').listview('refresh');
3 个解决方案
解决方案1
3 已采纳 2014-05-24 11:45:21
you are appending span elements to a ul . 您将span元素附加到ul 。 That is invalid as only li elements are allowed under ul . 这是无效的，因为在ul下只允许使用li元素。
perhaps what you want, based on the comments in the html, is 也许基于HTML中的注释，您想要的是
content += '<span class="secondsbox" style="position:absolute; width:28px; height:15px; background: #485ac8; margin-top: 54px; margin-left: -4px;"><span style="position:absolute; font-size:12.52px; margin-left: 5px; color:#FFF; margin-top: -1px;" id="secdisplay">'+count+'</span></span>';
demo at http://jsfiddle.net/QZ342/12/ 演示在http://jsfiddle.net/QZ342/12/
解决方案2
0 2014-05-24 11:28:30
Try creating an HTML element and then appending that, like this: 尝试创建一个HTML元素，然后附加它，如下所示：
$('#ball').append($("<span>").text(count));
$("<span>").text(count) will create a span HTML element that you can append to the children of the #ball element. $("<span>").text(count)将创建一个span HTML元素，您可以将其附加到#ball元素的#ball元素上。 It then sets the span's text to count. 然后，它设置跨度的文本进行计数。
解决方案3
0 2014-05-24 12:03:02
You have to move the count variable declaration outside the $.each() iterator as you are later calling it outside the loop otherwise I assume you will have an undefined error: 您必须将count变量声明移至$.each()迭代器之外，因为您稍后在循环之外调用它，否则我认为您将遇到未定义的错误：
var content='';
var count = '';//Declare it here
$.each(data,function(index,item){
count = parseInt(item.endtime)-parseInt(item.starttime);
content += '<li><a href="index.html"><img src="'+item.thumb+'" class="userimage">';
count += '<span class="secondsbox" style="position:absolute; width:28px; height:15px; background: #485ac8; margin-top: 54px; margin-left: -4px;"><span style="position:absolute; font-size:12.52px; margin-left: 5px; color:#FFF; margin-top: -1px;" id="secdisplay"></span></span>';
content += '<h3 class="userurl">'+item.keywords+'</h3>';
content +='<p class="username">'+item.bombscount+'</p></a></li>';
});
$('#ball').append(content);
$('#ball').append(count);
$('#ball').listview('refresh');
And here you code is working just with upside not and no other changes: JSFiddle 在这里，您的代码仅在没有上行空间且没有其他更改的情况下工作： JSFiddle
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.