Search jQuery

jQuery Forum

Using jQuery

garavani

array loop for append()

in Using jQuery • 10 years ago

Hello,

is there anyone who might help me with making this statement:

function appendTitles() {

$('#foldout').append("<img id = '1' class='titles' src='images/title_1.png'></img>","<img id = '2' class='titles' src='images/title_2.png'></img>","<img id = '3' class='titles' src='images/title_3.png'></img>","<img id = '4' class='titles' src='images/title_4.png'></img>");

}

simpler?

Thanks a lot!

Garavani

Replies(7)

garavani

Re: array loop for append()

10 years ago

Hi,

I have copied (and thanked to the author) this:

function appendTitles() {

var arrTitles = [1,2,3,4];

$.each(

arrTitles,

function(intIndex,objValue){

$('#foldout').append(

$("<img id = "+objValue+" class='titles' src='images/title_"+objValue+".png'></img>")

);

}

);

}

from another script suggested by someone.

Worked.

1) Sorry if I posted to fast instead of searching more before ;-)

2) Question:

Is this style to answer ones own question, if the solution is found, ok?

Or senseless?

Or good style in order to avoid additional work for a helper?

How would you (as a professional helper maybe) appreciate it?

I am pretty new in this kind of forum stuff.

Thanks

Garavani

creativec..

Re: Re: array loop for append()

10 years ago

Hi,

Yes, one should search for answers before posting a question.

And yes, it's okay to post an own solution so others know that they don't need to spend more time.

Also your solution might not be the only one. A forum is good to discuss different answers.

Another good rule: At most one question per thread.

The forum "About the jQuery Forum" is the best place to ask how to use the forum.

Have fun!
- creativecouple

creativec..

Re: array loop for append()

10 years ago

Hi,

your appendTitles() function with the .each() loop looks a bit overkill.

What about:

function appendTitles() {
for (var i=1; i<=4; i++) {
$('#foldout').append("<img id="+i+" class='titles' src='images/title_"+i+".png'>");
}
}

Have fun!
- creativecouple

creativec..

Re: array loop for append()

10 years ago

Another possiblity to repeat jQuery commands is to use the .repeat() method from my jquery-timing plugin.

E.g. it can be used this way:

function appendTitle(nr){
this.append("<img id="+(nr+1)+" class='titles' src='images/title_"+(nr+1)+".png'>");
}
$('#foldout').repeat(appendTitle).until(4);

Have fun!
- creativecouple

creativec..

Re: array loop for append()

10 years ago

Not to forget: ID values cannot be just numbers. In some browsers they have to start with a letter or underscore in order to work correctly.

Have fun!
- creativecouple

garavani

Re: array loop for append()

10 years ago

Hi creative couple!

Thanks for your kind answers!

I will go for the one from the Jquery plugin.

Thanks also for the advice on the IDs. This is new to me and I will keep that.

Thank you again very much

Garavani

garavani

Re: array loop for append()

10 years ago

Hi creative couple,

allow me to discuss still a little.

If I cleaned up the very first method like:

function appendTitles() {

var titles = ['title_1','title_2','title_3','title_4'];

$.each(titles, function(index,title){

$('#foldout').append("<img id = "+title+" class='titles' src='images/"+title+".png'></img>")

}

);

}

(it still works ;-)

it would have the advantage to keep the defined array.

My initial idea was to be able to change that list on an event elsewhere embedding as a global variable later on.

How would you do this instead?

By the way (to make it a little more difficult ;-)

I did one of my usual overkills by adding this animation to it:

$("#menu div:first")

.hoverIntent(function(){

var currTitle = $("#gwork").val();

appendTitles();

$('#foldout img')

.not('#title_'+currTitle)

.each(folder);

},function(){

$('#foldout img')

.stop(true.true)

.animate({'opacity': 0,'top': '0px','margin-top': '0px'}, 600, 'easeOutSine',function(){

$(this).stop(true.true)

.css('position', 'absolute');})

});

with „each(folder) [I think you wrote that code if I don’t go wrong]

function folder(index) {

var times = [1500,600,240];

if (times[index]) {

$(this) .stop(true, true)

.css('position', 'relative')

.animate({'opacity': 1,'top': '-132px','margin-top': '17px'},times[index],'easeOutSine');

}

So I guess my next task would be to gether all this stuff in an overall function that could be turned on and off by an event elsewhere.

Am I going too far?

:-)

Garavani

PS: I changed all my IDs

Top Reply

Response title

Attachments

jQuery Forum

array loop for append()

Replies(7)

Re: array loop for append()

Re: Re: array loop for append()

Re: array loop for append()

Re: array loop for append()

Re: array loop for append()

Re: array loop for append()

Re: array loop for append()

Statistics

Tags

Actions