CODEWITHSUNDEEP
javascriptjqueryajaxhtml
madhu kumar
madhu kumar

Reputation: 810

How to append two variables inside Jquery?

I have some data in Json. For example, consider endtime=316, starttime=420. So what I need is I want to subtract this data and display it in my html page. I am getting subtracted values in alert but not able to append this data to the html page using jQuery.

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

Upvotes: 0

Views: 3682

Answers (3)

tmarwen
tmarwen

Reputation: 16374

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:

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196237

you are appending span elements to a ul. That is invalid as only li elements are allowed under ul.

perhaps what you want, based on the comments in the html, is

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/

Upvotes: 3

Lzh
Lzh

Reputation: 3635

Try creating an HTML element and then appending that, like this:

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

$("&lt;span>").text(count) will create a span HTML element that you can append to the children of the #ball element. It then sets the span's text to count.

Upvotes: 0

Related Questions