CODEWITHSUNDEEP
jqueryarrays
kelly johnson
kelly johnson

Reputation: 1636

Taking an array and adding <li> for each array place

UPDATE: Here is the entire function I'm using when a person click to advance a slideshow:

$('#navNext').click(function(){
  var current = $('#slider1').find('li.on');

  if(move !==-2695) {
      move = move - amount;
      templateNum = templateNum +1;
      current.removeClass('on');
      current.next().addClass('on');
      var grabAlt = $('.on img').attr('alt').split('|');
      var holdAlt = grabAlt;

   var grabAlt = $('.on img').attr('alt').split('|');
   $('.altDescription').html('<ul><li>' + grabAlt.join('</li><li>') + '</li></ul>');

      letsMove(move);
      $('.templateName').text('Template' + ' '+templateNum);
  }

});

NOTE: my 'letsMove(move);' function is declared somewhere else as are other small things. I'm using a fixed-width for images to slide through and currently would have to change the maximum/minimum value..but that's all fine for now. I'm just focusing on the li's now.

I have this:

var grabAlt = $('.on img').attr('alt').split('|');
var holdAlt = grabAlt;

$('.altDescription').html('<li>' + holdAlt[0] + '</li>' + '<li>' + holdAlt[1] + '</li>' +     '<li>' + holdAlt[2] + '</li>'+'<li>' + holdAlt[3] + '</li>' +'</ul>');

from the code you might see that I'm grabbing the alt text from an image, separating at the piping symbol which throws them into an array, and then make each item a list item. This all works just fine.

What I'm trying to do now is make it more dynamic by saying "for every item in the current array, wrap it in an <li>,</li> tag.

I'm playing with .each() but I'm getting a little mixed up. I thought it might be something like:

$(holdAlt).each(function(){
$('.altDescription').html('<li>' +holdAlt+'</li>');})

but I realized I'm not passing a specific item from the array...but the whole array and then...well....fail.

Upvotes: 0

Views: 537

Answers (3)

Paul
Paul

Reputation: 141839

this refers to the current element within the function you pass to each():

$(holdAlt).each(function(){
    $('.altDescription').append('<li>'+this+'</li>');
});

Also take a look at the JQuery docs on append() vs html()

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this where this will point to every item of the array in the loop.

$.each(holdAlt, function(){

   $('.altDescription').append('<li>' +this+'</li>');
});

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 219930

While not the traditional way, this is how I would do it:

var grabAlt = $('.on img').attr('alt').split('|');

$('.altDescription').html('<ul><li>' + grabAlt.join('</li><li>') + '</li></ul>');

Note: This does not take into account the possibility that grabAlt might be empty.

Upvotes: 2

Related Questions