How can I populate html titles with a javascript array?

Question

I have a lightbox set up on my site with titles that look like this

<div class="Container" id="">
    <a href="Link" title="titleVar">Cool Picture</a>
    <a href="Link" title="titleVar">Cool Picture</a>
    <a href="Link" title="titleVar">Cool Picture</a>
</div>

and the list is going to keep growing. Is there a way I can have a second file where I keep all the titles and they get populated where the "titleVar" is? Right now what I am doing is putting the titles directly in there and the code is getting really messy because the titles get pretty long sometimes

Edit: To clarify when I say a "second file" I mean a separate html or xhtml list specifically designated for the titles. I remember seeing something similar once with a span tag

<span>title1
title2
title3
title4
title5</span>

and these were able to be populated. The problem is I can't find the file I did this with

from a file ? where would said file come from, what have you tried ? typically data is stored in a database you then would output your html via php or some other language — mcgrailm
– mcgrailm, Commented Sep 23, 2013 at 15:48
you would be better populating a database and then using a server side language to retrieve your data — Jon Harding
– Jon Harding, Commented Sep 23, 2013 at 15:48
would require either a server-side scripting or a JavaScript templating (such as Handlebars) — Zathrus Writer
– Zathrus Writer, Commented Sep 23, 2013 at 15:49
You can, via something like knockout, or just a JS file that includes the details and loops over the images - but you're adding code complexity, at least one additional network request, and extra rendering time (all things that matter to users of the site) -- just to keep the source code neater (which does not matter to your users). — Paul Roub
– Paul Roub, Commented Sep 23, 2013 at 15:51

tymeJV · Accepted Answer · 2013-09-23 15:51:07Z

2

You could setup a .json file and iterate through it to set the title:

JSON:

{
    titles: [
        { title : 'some title' },
        { title : 'some other title' }
    ]
}

Then run a $.getJSON and iterate the results:

$.getJSON("titles.json", function(data) {
    $(".Container").children("a").each(function(index) {
        $(this).attr("title", data.titles[index].title);
    });
});

answered Sep 23, 2013 at 15:51

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

BenM · Accepted Answer · 2013-09-23 18:09:55Z

2

In your javascript you can set up an array with all of your titlevar's in it and then perform a loop through it adding them all to the container.

var titilevararray = ["title1", "title2"] //all your titlevars here

$.each(titlevararray, function(i, val){
    $("#Container").append('<a href="Link" title="'+val+'">Cool Picture</a>);
});

The code is only a guidance so tweak it to your needs.

edited Sep 23, 2013 at 18:09

answered Sep 23, 2013 at 15:50

BenM

4,2682 gold badges34 silver badges58 bronze badges

1 Comment

Gary Hayes Over a year ago

This is the cleanest solution. You beat me to it. Having them in an array like that allows you to edit the array without disrupting the order of things, or you can intentionally reorder them very easily.

Collectives™ on Stack Overflow

How can I populate html titles with a javascript array?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related