Assigning a background image based on the quantity of items in an array or object

Question

Assigning a background image based on the quantity of items in an array or object

I'm having trouble appending divs and setting their background image based on the number of items in an array or object. Despite adding the divs correctly, all of them end up with the same background image when only three should have it. Can someone explain why this is happening?

JS

Here is the version using an array.

var plane_images = ["images/Top.png", "images/ata21.png", "images/ata26.png", "images/Top.png", "images/Top.png"];

for(var img = 0; img < plane_images.length; img++){
    $("#menu").append("<div class='schematics'></div>");
    $(".schematics").css("background-image", "url(" +plane_images[img] +")");
    console.log(plane_images[img]);
}

This is the object-oriented version.

var Plane_Images = {
    top: "images/Top.png",
    structure: "images/ata21.png",
    electrics: "images/ata26.png",
    fuel: "images/Top.png",
    hydraulics: "images/Top.png"
}

for(var images in Plane_Images){
    var image_src = Plane_Images[images];

    $("#menu").append("<div class='schematics'></div>");
    $(".schematics").css("background-image", "url(" +image_src +")");
    console.log(image_src); 
}

It's worth noting that each console log shows the correct values being passed.

HTML

<body>
    <div id="header"></div>
    <div id="holder">
        <div id="menu"></div>
        <div id="plane_image"></div>
        <div id="sub_menu"></div>
    </div>
    <div id="footer"></div>
</body>

javascript jquery css arrays oop

Answer 1

Answer №1

Instead of adding the element and then selecting it immediately, a more efficient approach is to create the elements one by one, style them, and then add them to the DOM.

$menu = $("#menu");

for(var images in Plane_Images){
  var image_src = Plane_Images[images];
  $schematic = $("<div></div>");
  $schematic.addClass("schematics");
  $schematic.css("background-image", "url(" + image_src +")");
  // you can log the element to the console to debug it here
  console.log($schematic);

  $menu.append($schematic);
}

By caching the menu element using this method, you avoid spending extra time evaluating the jQuery selector every iteration of the loop, resulting in faster performance as well.

If you prefer to use an Array instead of an object, you can utilize the jQuery $.each method:

$.each(Plane_Images, function(image_src) {
  $schematic = $("<div></div>");
  $schematic.addClass("schematics");
  $schematic.css("background-image", "url(" + image_src +")");

  $menu.append($schematic);
});

Answer 2

Instead of adding the element and then selecting it immediately, a more efficient approach is to create the elements one by one, style them, and then add them to the DOM.

$menu = $("#menu");

for(var images in Plane_Images){
  var image_src = Plane_Images[images];
  $schematic = $("<div></div>");
  $schematic.addClass("schematics");
  $schematic.css("background-image", "url(" + image_src +")");
  // you can log the element to the console to debug it here
  console.log($schematic);

  $menu.append($schematic);
}

By caching the menu element using this method, you avoid spending extra time evaluating the jQuery selector every iteration of the loop, resulting in faster performance as well.

If you prefer to use an Array instead of an object, you can utilize the jQuery $.each method:

$.each(Plane_Images, function(image_src) {
  $schematic = $("<div></div>");
  $schematic.addClass("schematics");
  $schematic.css("background-image", "url(" + image_src +")");

  $menu.append($schematic);
});

Answer 3

Answer №2

$("#menu").append("<div class='schematics'></div>");
$(".schematics").css("background-image", "url(" +image_src +")");

You are targeting all elements with the class .schematics, including ones that existed before this code block.

A more accurate approach would be:

for(var key in Plane_Images){
    var image_src = Plane_Images[key];

    $("<div class='schematics'></div>")
        .css("background-image", "url(" +image_src +")")
        .appendTo("#menu");

    console.log(image_src);
}

Answer 4

$("#menu").append("<div class='schematics'></div>");
$(".schematics").css("background-image", "url(" +image_src +")");

You are targeting all elements with the class .schematics, including ones that existed before this code block.

A more accurate approach would be:

for(var key in Plane_Images){
    var image_src = Plane_Images[key];

    $("<div class='schematics'></div>")
        .css("background-image", "url(" +image_src +")")
        .appendTo("#menu");

    console.log(image_src);
}

Answer 5

Answer №3

Utilizing Identifiers:

var Aircraft_Pictures = {
  top: "images/Top.png",
  construction: "images/ata21.png",
  electrical: "images/ata26.png",
  fuel: "images/Top.png",
  hydraulics: "images/Top.png"
}

var x=1;
for(var pics in Aircraft_Pictures){
  var pic_src = Aircraft_Pictures[pics];

  $("#menu").append("<div class='schematics' id='bgPic"+x+"'></div>"); // include ID
  $("#bgPic"+x).css("background-image", "url(" +pic_src +")"); // utilize ID not class
  console.log(pic_src); 
  x++; // increment x to avoid multiple IDs
}

Answer 6

Utilizing Identifiers:

var Aircraft_Pictures = {
  top: "images/Top.png",
  construction: "images/ata21.png",
  electrical: "images/ata26.png",
  fuel: "images/Top.png",
  hydraulics: "images/Top.png"
}

var x=1;
for(var pics in Aircraft_Pictures){
  var pic_src = Aircraft_Pictures[pics];

  $("#menu").append("<div class='schematics' id='bgPic"+x+"'></div>"); // include ID
  $("#bgPic"+x).css("background-image", "url(" +pic_src +")"); // utilize ID not class
  console.log(pic_src); 
  x++; // increment x to avoid multiple IDs
}

Answer 7

Answer №4

You have been setting the background based on a class which is causing the last image to override all other div backgrounds. It would be better to use an id instead. You can achieve this by:

for(var img = 0; img < plane_images.length; img++){
    $("#menu").append("<div class='schematics'"+i+"></div>");
    $("#schematics"+i).css("background-image", "url(" +plane_images[img] +")");
    console.log(plane_images[img]);
}

Answer 8

You have been setting the background based on a class which is causing the last image to override all other div backgrounds. It would be better to use an id instead. You can achieve this by:

for(var img = 0; img < plane_images.length; img++){
    $("#menu").append("<div class='schematics'"+i+"></div>");
    $("#schematics"+i).css("background-image", "url(" +plane_images[img] +")");
    console.log(plane_images[img]);
}

Assigning a background image based on the quantity of items in an array or object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Reactive form allows you to easily format dates

What is the best way to retrigger an ajax request in jQuery after it encounters an error?

Employing Ajax.Updater to retrieve a javascript file (prototype.js)

How can I prevent ajax loader from overlapping headers in jquery-datatables?

Using jQuery to Block Remote Rails Form Submission using Live() Event Handler

Click on the button to sort Angular data

I am looking to incorporate a rounds div into the backdrop

Exploring the concept of sharing variables between files in Node.js and JavaScript

Querying specific data from the API using unique identifiers

Having Trouble Implementing Canvas in My Vue.js Project

Tracking User IDs across different domains with Piwik: a step-by-step guide using PHP and JavaScript

Can CSS alone be used to provide a cover for auto-scaling images?

Place the div's scrollbar at the beginning of its content

Load all HTML content from external files using a Bootstrap modal

Tips for synchronizing text field and formula field content on MathQuill 0.10

Elements that smoothly transition in and out of view

Escape sequences do not seem to be functioning properly when using innerHTML

Calculating Two Results for Two Target Elements in Vue.js

The loaded iframe did not deliver any valid message

Having an issue with retrieving value from a textfield in JavaScript