Create a list item dynamically from two different folders JQuery

cocosurfer · 07-21-2011, 11:31 PM

0 down vote favorite

Ok I will explain this the best I can

what I would like to do

is create a Jquery function that will create a list from two different folders so it would give me something like this for up to 30 images

Code:

<div id="box">
    <ul>
      <li><a href="images/test1.jpg"><img src="imagesthumbs/test1.jpg" alt="" /></a></li>
      <li><a href="images/test2.jpg"><img src="imagesthumbs/test2.jpg" alt="" /></a></li>
      <li><a href="images/test3.jpg"><img src="imagesthumbs/test3.jpg" alt="" /></a></li>
    </ul>
</div>

this is what has been suggested so far but it is not executing - just a blank page I know I am missing something obvious

Code:

function addItems(num) {
  var myList = $('#box > ul').first();
  for(var i = 1; i <= num; i++) {
    myList.append('<li><a href="images/test' + i + '.jpg"><img src="imagesthumbs/test' + i + '.jpg" alt="" /></a></li>');
  }
}

this is how i've implemented it so far

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">



$(document).ready(function() {

function addItems(num) {
  var myList = $('#box > ul').first();
  for(var i = 1; i <= num; i++) {
    myList.append('<li><a href="images/test' + i + '.jpg"><img src="imagesthumbs/test' + i + '.jpg" alt="" /></a></li>');
  }
}

 
 
 });
 





</script>


<body>
<div id="#box">
<ul>



</ul>


</div>
</body>
</html>

about to give up

VIPStephan · 07-21-2011, 11:57 PM

Well, the function doesn’t execute all by itself, you have to invoke it somehow. But you’ve also got errors in your HTML. Your ID must not contain the hash character (#) and a ul must not be empty. Try this:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var num = 30; // the number of images; needs to be adjusted accordingly
    $('#box').append($('<ul>'));
  for(var i = 1; i <= num; i++) {
      $('#box ul').append(
          $('<li>').append(
              $('<a>', {href: 'images/test'+i+'.jpg'}).append(
                  $('<img>', {src: 'imagesthumbs/test'+i+'.jpg'})
              )
          )
      )
  }
});
</script>
<body>
<div id="box"></div>
</body>
</html>

I prefer the DOM kind of way to create elements.

cocosurfer · 07-22-2011, 08:57 AM

I think its the file path that is failing, all I get is bullet points

cocosurfer · 07-22-2011, 09:03 AM

ok, changed the path its working better but does not show images with 0 before the number eg test_01