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

Question

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.

Joseph Silber · Accepted Answer · 2011-08-31 02:46:36Z

2

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.

answered Aug 31, 2011 at 2:46

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kelly johnson Over a year ago

Well, that's cool too but the first item isn't next to a bullet and the the last item is an empty bullet.

Joseph Silber Over a year ago

@kelly johnson: What do you mean by that? Check out this fiddle: jsfiddle.net/PTWzt

kelly johnson Over a year ago

well, this is weird. If I add a class to the new ul, I get an issue. no class and just your idea, it works w/no bullets....just a css issue. I will update my post to show the entire function w/your idea.

Joseph Silber Over a year ago

@kelly johnson: There's too much stuff going on there. Isolate the parts of the code that are giving you your headache, build a test case on jsFiddle, then post it here so that we might be able to help you...

kelly johnson Over a year ago

Ok, I got this technique to work. Had to alter some actual HTML...go figure..I'm always looking at the javascript/jquery or css...thanks so much!

ShankarSangoli · Accepted Answer · 2011-08-31 02:48:39Z

1

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

$.each(holdAlt, function(){

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

answered Aug 31, 2011 at 2:48

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Joseph Silber Over a year ago

1) holdAlt is an array, and has no each method. You might try using $.each(holdAlt, function() {...}). 2) You are simply replacing the HTML inside of .altDescription on and on...

Paul · Accepted Answer · 2011-08-31 02:48:54Z

1

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()

answered Aug 31, 2011 at 2:48

Paul

142k28 gold badges285 silver badges272 bronze badges

1 Comment

kelly johnson Over a year ago

That's nice, but append does just that... it keeps appending. .html() replaces everything in one fell swoop so I'd have to empty the ul then append each time a btn is clicked (unknown by my original post)

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related