Assigning a class to an array in Javascript
Question
I have a rather simple question that I can't seem to figure out.
I want to display a different element from a simple array on different images. The elements are strings and I want to add some styling to them, therefore I need to make them part of a div that would be a part of the div of the image that the string goes on top of.
If the text wasn't in an array, there wouldn't be an issue as I could just do this:
var text = "<div class='text'>SOME TEXT HERE</div>";
$('.image').append(text);
In this case it works fine and I can apply styling to text that is now part of a div with a class 'text'.
However, I need to display different strings of text on different images, therefore I have them stored like this:
var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];
All I want to do is make textArray part of a div that I could then add some styling to.
I tried this but it wouldn't work, as textArray doesn't append as part of the text div :
var text = "<div class='text'>textArray</div>";
$('.image').append(textArray[2]);
I would appreciate any help, thank you!
2 answers
solution1
0 2020-01-23 09:19:47
I'm not sure if I understood the question correctly but you can just go through your array and inject for each text an element of your desire.
For each text in array:
var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];
for(var key in textArray) {
var this_text = textArray[key]
$('.image/element selector of your liking (can also be dynamic)').append("<div class='text'>"+this.text+"</div>");
}
You can also go through each image and then add the text according to the array position:
For each image on page, according text:
$(".image").each(function( i ) {
$(this).append("<div class='text'>"+textArray[i]+"</div>");
}
Just make sure you have a element for each image in your array.
solution2
0 ACCPTED 2020-01-23 09:20:00
Create an element, add the text to it, then add that to image.
I would suggest you immediately create a disconnected jQuery object. This is then a html element you can manipulate, but isn't atached to DOM yet. You do this by $('<html code here>') .
This way you can use all the tools jQuery provides.
Then add the text to that, you don't have to paste strings together now and can use the jQuery text() function to add the text. When your new element is finished, you can add it to your image class.
You can this way also save the reference to your text container element and reuse it, like I have in the simple animation function below.
var current = 2; var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"]; var $text = $("<div class='text'>"); $text.text(textArray[current]); $('.image').append($text); /** * Just to illustrate that $text can be reused. */ $('button').on('click', (e) => { setInterval(() => { current++; if(current >= textArray.length) { current = 0; } $text.text(textArray[current]); },1000); });
.image { width: 300px; height: 200px; background-color: green; color: white; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image"> </div> <button>Rotate the texts</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.