Jquery - appending a string from an array to a div

#1

Hello, I am new to jquery and programmering. I want to add an span container in my html document’s div container. The div that I want to append to on my html document looks this:

. 
<script type="text/javascript">

 var test        = ['A', 'B'];
 var counter = 0;

 $(document).ready(function(counter){
        $('#test').append('<span>' test[counter] '</span>');
        
      -if/else here?
       
}
});
</script>
#2

here:

'<span>' test[counter] '</span>'

to join string and variables together you need to use +:

'<span>' +  test[counter] + '</span>'

where you should place your if/else depends on what it needs to do.

#3

I need to check if I am at the end of my array, so if I am at 1 (‘B’), I would be at the end of the array, then reset the counter to 0, so I can loop my array, making the text change in the div, if that makes any sense… I am not the best at explaining, I’m sorry :confused:

#4

I want to do fadeIn() and fadeOut() events on them as well later on… if that is important knowledge

#6

why use a counter like you did? You can simple make a for loop:

result = "";
arrayLength = test.length;
for (var i = 0; i < arrayLength; i++){
    result += '<span>' + test[counter] + '</span>';
}
$("#test").append(result);
#7 
var example = ['A', 'B', 'C', 'D'];
        textSequence(0);

        function textSequence(i) {

            if (example.length > i) {
                setTimeout(function() {
                    document.getElementById("sequence").innerHTML = example[i];
                    textSequence(++i);
                }, 1000); // 1 second (in milliseconds)

            } else if (example.length == i) { // Loop
                textSequence(0);
            }

        }

I need to this, just with jquery, since I want it to do jquery events on them such as fadeIn/fadeOut and change between the strings in my array :confused:

#8

how did we get from the code you posted first to this latest code?

Anything done in Jquery can be done in Javascript, Jquery is just makes DOM manipulation is a lot easier

#9

Hmm, let me try to be more clear. The code above is in regular javascript, I know that it is just something I found, which does something close to what I want. The code loops through the array “var example = [‘A’, ‘B’, ‘C’, ‘D’];”. What I want to do is make use of jQuery, for making the them fadeIn and fadeOut as the div changes it’s content…

#10

So that each letter fadeIn() then fadeOut() one at the time:thinking:

#11

I want to make something similar to this https://www.pleo.io/da/ under the “Sig farvel til” text at the homepage

#12

fadeIn and fadeOut already allow you to set the duration of the fade, what do you need of me? I already helped you further

don’t expect me to code the solution, if you have specific questions, ask them, i will do my best to answer them

#13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.