Utilize the ID attribute for naming arrays in jQuery

Question

Utilize the ID attribute for naming arrays in jQuery

We have multiple links enclosed in a block:

<div>
    <a href="#" id="john">text</a>
    <a href="#" id="mary">text</a>
    <a href="#" id="emma">text</a>
</div>

Each link has a unique id.

I am attempting to create separate arrays in javascript for each link inside this block. The challenge lies in the dynamic nature of the ids, which change constantly.

The desired output should be like this:

var john = [];
var mary = [];
var emma = [];

The id of the link corresponds to the name of the new array.

1) How can I achieve this coding task?

2) How can I use the id of the link to reference an array? For instance, after creating the arrays, in javascript I want to do something like

$(this).attr("id").push("text"); // when hovering over a link

This code snippet does not work as intended. What is the correct method to accomplish this?

javascript jquery html css arrays

Answer 1

Answer №1

One cannot dynamically generate variables, however one can dynamically assign properties to an object. To do this, create a main object specifically for this purpose:

var mainObject = {};
$('a').each(function () {
    mainObject[this.id] = [];
});

To add elements to the array, use the following method:

mainObject[this.id].push('text');

Answer 2

One cannot dynamically generate variables, however one can dynamically assign properties to an object. To do this, create a main object specifically for this purpose:

var mainObject = {};
$('a').each(function () {
    mainObject[this.id] = [];
});

To add elements to the array, use the following method:

mainObject[this.id].push('text');

Answer 3

Answer №2

If for some unknown reason you find the need to store data in separate arrays, you can achieve this by utilizing javascript's eval() function to create the arrays (and any other elements) dynamically.


$(document).ready(function(){
  $("a").each(function(){
    eval("var " + $(this).attr("id") + " = new Array()")
  })
})

You can then use eval similarly to push items into these dynamically created arrays.

However, I personally agree with Box9's approach as a more logical solution.

For further reference:

Answer 4

If for some unknown reason you find the need to store data in separate arrays, you can achieve this by utilizing javascript's eval() function to create the arrays (and any other elements) dynamically.


$(document).ready(function(){
  $("a").each(function(){
    eval("var " + $(this).attr("id") + " = new Array()")
  })
})

You can then use eval similarly to push items into these dynamically created arrays.

However, I personally agree with Box9's approach as a more logical solution.

For further reference:

Utilize the ID attribute for naming arrays in jQuery

Answer №1

Answer №2

Similar questions

How can you extract elements from a JSON array into separate variables based on a specific property value within each element?

Combining JSON objects in Node.js

Uploading images seamlessly through ajax

The onkeyup event appears to be malfunctioning

Unable to activate the WebRTC track event

Using CSS to layer a background image

What is the reasoning behind certain libraries offering methods that perform identical tasks, but one in synchronous and the other in asynchronous context?

No animation will be applied to slideUp() on a specific block without using jQuery

Adding an object to an ArrayList: A step-by-step guide

The function for fetching JSON data using AJAX is not functioning properly

"Enhance your web development skills by mastering jQuery alongside the

Exploring the functionality of AngularJS routing on a webpage

What is the best way to retrieve the content within a <span> tag using jQuery?

Unique color selection for progress bars in Bootstrap Vue

Utilize AJAX to fetch and load JSON data for use in a different function

transforming unicode into regular characters prior to being presented on a webpage

Google Chrome's development tools are unable to detect the manifest

Retrieving data from an anonymous function in AngularJS and outputting it as JSON or another value

How to apply an active class to the current hyperlink in ASP.NET using C#

Maintaining the integrity of items in a Bootstrap 4 Navbar and ensuring their center alignment