Question

我在Json中有一些数据。例如，请考虑endtime=316，starttime=420。所以我需要的是我想减去这些数据并在我的html页面中显示它。我在警报中得到减去的值，但无法使用 jQuery 将此数据附加到html页面。

JSFIDDLE

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

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');

Answer 1

您要将span元素附加到ul。这是无效的，因为li下只允许ul个元素。

根据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>';

演示http://jsfiddle.net/QZ342/12/

Answer 2

尝试创建一个HTML元素，然后将其添加，如下所示：

$('#ball').append($("&lt;span>").text(count));

$("<span>").text(count)将创建一个span HTML元素，您可以将其添加到#ball元素的子元素中。然后它将跨度的文本设置为计数。

Answer 3

您必须将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');

在这里，您的代码只是处于优势而不是其他更改：JSFiddle

如何在Jquery中附加两个变量？

3 个答案: