• 0

Passing a variable to a jQuery selector


Question

I have some JavaScript code that loops through a record set using a for loop. The ID of each record is assigned dynamically using this script. For example:

id="header1", id="header2", id="header3"

The numeral at the end of the id is assigned via script.

I also need to select these IDs via jQuery but I do not understand how to insert a variable into my jQuery selector.

I have tried the following (simplified for clarity):

$("#header[i]")...;
$("#header"+[i])...;
$("#header+[i]")...;
$("#header"+i)...;

None of these things seem to work as jQuery doesn't select the objects I'm trying to get.

Any ideas on how to dynamically create jQuery objects using a counter variable?

10 answers to this question

Recommended Posts

  • 0

I can't get this technique to work.

My code:

var currentIMHeader = "IM-header"+[i];
			var currentIMData = "IMData"+[i];
			alert("binding a function to "+currentIMData);
			$(currentIMHeader).toggle( function() {
				alert("showing "+currentIMData);
				$(currentIMData).show();
				}, function() {
				alert("hiding "+currentIMData);
				$(currentIMData).hide();
				});

The alerts are there for testing purposes. I have also tried passing a "#" to the selector as I am trying to select based on ID.

  • 0

This is a basic thing on JavaScript syntax, not on jQuery really.

var i = 5;

$("#header"+i).fadeOut();

I see no reason why this would not work - fading out the element with an ID of header5.

Edited by Rob
  • 0
  Rob said:
This is a basic thing on JavaScript syntax, not on jQuery really.

var i = 5;

$("#header"+i).fadeOut();

I see no reason why this would not work - fading out the element with an ID of header5.

It might work outside of a for loop but it doesn't seem to work in one.

The following code with hardcoded jQuery selectors should bind a function to the "defName0" object but it doesn't bind when used within a for loop.

$("#defName0").bind("click", function() {
			 $("#defValue0").fadeIn("normal");
			 });

I'm completely stuck.

Is there some basic incompatibility betwen standard JS For loops and jQuery? jQuery has an "Each()" function that I have not used yet - is this the path to salvation?

  • 0

Quick usage note:

$(".headers").fadeOut();

This would fade out all elements with a class of 'headers'.

$(".headers").each(function() { 
  alert("Fading out element: "+$(this).attr("id"));
  $(this).fadeOut(); 
} );

That would find all elements with a class of 'headers', alert to the screen their ID, and fade them out.

  • 0

To append on what Rob posted, you can put a variable in function() to have an iterated value for the loop

$(".headers").each(function(i) {
  alert("Fading out element "+i+": "+$(this).attr("id"));
  $(this).fadeOut();
} );

Do note that it works like an indexed array, so i will start at 0, not at 1.

  • 0
  raskren said:
When passing the counter variable "i" to my jQuery function is there a need to reference the variable using brackets ""?

$(".headers").each(function([i]) {

No, the only time (that I know of) that it is necessary is for arrays or lists:

var locations = Array();
locations[0] = 'Neowin.net';

var sites = ["Neowin.net", "Microsoft.com"];

  • 0

Long explanation incoming.

jQuery is JavaScript. All JavaScript rules apply to everything jQuery. jQuery doesn't change how the language (and interpreters) function and behave. Case in point:

var i = 5
$("#myElement" + i).bind(...);

In the above code, "#myElement" + i always returns the string #myElement5. Therefore, the jQuery function $() receives the string #myElement5 as a parameter.

The code your provided has some issues with it. I won't say that what you did is wrong, because you wrote it the way you thought it would work. It's wrong in the sense that the interpreter interprets the code differently than what you thought it would. Your code follows; I added the for loop because I assumed that's what you're doing:

for (var i = 0; i < 5; i++) {
	var currentIMHeader = "IM-header"+[i];
	var currentIMData = "IMData"+[i];
	alert("binding a function to "+currentIMData);

	$(currentIMHeader).toggle(
		function() {
			alert("showing "+currentIMData);
			$(currentIMData).show();
		}, 
		function() {
			alert("hiding "+currentIMData);
			$(currentIMData).hide();
		}
	);
}

First, is used incorrectly. The [] operators are for arrays (and objects, but we won't go there) to pick an item in the array at a specific index. For instance, say I have an array with ten items. You use the [] operators to pick which item you want from the array:

alert(myArray[5]); // alerts the sixth item in the array

You don't receive an error from the usages above, but it is incorrect.

The issues in your code are scope and closures. Variables defined in a function are function scoped... meaning any variable you define in the function can be used anywhere in that function as long as the variable is defined. Take the following code samples as an example:

alert(i); // alerts undefined

for (var i = 0; i < 5; i++) {
	alert(i); // alerts 0, 1, 2, 3, or 4
}

alert(i); // alerts 5 (because the loop iterated i to 5, then exited because 5 isn't less than 5)

...

alert(foo); // undefined

if (true) {
	var foo = "bar";
}

alert(foo); // alerts bar

Even though the i and foo variables are defined within a block (designated by {}) of code, they can be used outside that block and still retain their value. That in itself doesn't cause the problem you see, but throw in a closure and things can start to behave differently than you'd think.

Looking back at your code, the function declarations for the toggle() method are closures. The problem comes from using the currentIMData variable within the enclosed functions. Each function passed to the toggle() method contains a reference to the same currentIMData variable, and currentIMData's value changes with each iteration of the loop. So in actuality, after the loop exists, this is what the the interpreter sees for every heading when toggle() is called:

function() {
	alert("showing IMData5");
	$("IMData5").show();
}, 
function() {
	alert("hiding IMData5");
	$("IMData5").hide();
}

The way to get around this issue is, ironically, another closure; a function to return a function. The code below works:

for (var i = 0; i < 5; i++) {
	var currentIMHeader = "IM-header"+ i;
	var currentIMData = "IMData"+ i;
	alert("binding a function to "+currentIMData);

	$(currentIMHeader).toggle(
		function(elementId) { // function that accepts a parameter
			return function() { // the function to return
				alert("showing "+ elementId);
				$(elementId).show(); // use the variable from the parameter
			};
		}(currentIMData), // call the function and pass currentIMData as the parameter
		function(elementId) { // function that accepts a parameter
			return function() { // the function to return
				alert("hiding "+ elementId);
				$(elementId).hide(); // use the variable from the parameter
			};
		}(currentIMData) // call the function and pass currentIMData as the parameter
	);
}

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Amazon lays off more staff across Goodreads and Kindle divisions by Hamid Ganji Dozens of Amazon employees working on the retailer's book divisions have been laid off. As reported by Reuters, Amazon confirmed that it's cutting jobs across the Goodreads review site and Kindle units, which impacts fewer than 100 workers. Amazon says the recent layoffs across Goodreads and Kindle divisions are meant to improve efficiency and streamline operations. The giant retailer has constantly reduced staff across various divisions over the past few years. According to CEO Andy Jassy, reducing headcounts helps the company to eliminate bureaucracy. "As part of our ongoing work to make our teams and programs operate more efficiently and to better align with our business roadmap, we've made the difficult decision to eliminate a small number of roles within the Books organization," an Amazon spokesperson said. Layoffs recently impacted employees in Amazon's Wondery podcast division, devices and services units, communications, and in-store staff. However, Amazon's Q1 results show the retailer has added about 4,000 jobs compared to Q4 2024. After the Covid pandemic settled down, many companies began laying off thousands of staff they hired during the pandemic to respond to growing demands. The layoff trend among tech firms still exists today, and AI has amplified it. The latest data shows that in 2025, about 62,832 tech employees were laid off across 141 tech companies. Also, 152,922 tech employees across 551 companies were laid off in 2024. More layoffs are expected to occur due to declining economic growth, tariffs, and the expansion of AI across companies. Amazon is also gearing up to double down in AI investments and robotics. The company has recently announced the forming of a new agentic AI team to develop an agentic AI framework for use in robotics. Also, a new report by The Information indicates that Amazon has begun testing humanoid robots for package delivery.
    • Major Privacy 0.98.1.1 Beta by Razvan Serea MajorPrivacy is a cutting-edge privacy and security tool for Windows, offering unparalleled control over process behavior, file access, and network communication. It is a continuation of the PrivateWin10 project. By leveraging advanced kernel-level protections, MajorPrivacy creates a secure environment where user data and system integrity are fully safeguarded. Unlike traditional tools, MajorPrivacy introduces innovative protection methods that ensure mounted encrypted volumes are only accessible by authorized applications, making it the first and only encryption solution of its kind. MajorPrivacy – Ultimate Privacy & Security for Windows key features Process Protection – Isolate processes to block interference from unauthorized apps, even with admin privileges. Software Restriction – Block unwanted apps and DLLs to ensure only trusted software runs. Revolutionary Encrypted Volumes Secure Storage – Create encrypted disk images for sensitive data. Exclusive Access – Unlike traditional tools, only authorized apps can access mounted volumes—blocking all unauthorized processes. File & Folder Protection – Lock down sensitive files and prevent unauthorized access or modifications. Advanced Network Firewall – Control which apps can send or receive data online. DNS Monitoring & Filtering – Track domain access and block unwanted sites (Pi-hole compatible filtering coming soon). Tweak Engine – Disable telemetry, cloud integration, and invasive Windows features for better privacy. Why MajorPrivacy? Kernel-Level Security – Protects at the deepest system level. Unmatched Encryption Protection – Keeps mounted volumes safe from all unauthorized access. Full System Control – Block, isolate, or restrict processes as needed. Enhanced Privacy – Stops Windows & apps from collecting unnecessary data. Perfect for privacy-conscious users, IT pros, and anyone who wants total system control. Major Privacy 0.98.1.1 Beta changelog: The 0.98.1 release of MajorPrivacy introduces significant enhancements and a number of critical fixes aimed at improving usability, localization, and system integration. A major new feature is the introduction of full translation support, allowing the application interface and tweaks to be localized into multiple languages. Initial translations include AI-assisted German and Polish versions, a community-contributed Turkish translation, and Simplified Chinese. Users interested in contributing translations or adding new languages are encouraged to participate via the forum. This version also improves compatibility and deployment by bundling the Microsoft Visual C++ Redistributable with the installer, which is required for the ImDisk user interface. Several important bugs have been resolved. The installer now correctly removes the driver during uninstallation. Tweak definitions have been cleaned up for better consistency. A number of networking issues were addressed, including failures related to network shares and incorrect handling of mapped drive letters. It is now required to use full UNC paths for defining rules involving shared resources. Additionally, configuration persistence issues on system shutdown have been fixed, as well as problems affecting protected folder visibility and rule precedence involving enclave conditions. Finally, the underlying driver code has been refactored, laying the groundwork for better maintainability and future enhancements. MajorPrivacy-v0.98.1.1.exe (0.98.1a) hotfix for #71 Download: Major Privacy 0.98.1.1 Beta | 47.4 MB (Open Source) View: MajorPrivacy Home Page | Github Project page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • OpenAI responds to The New York Times' ChatGPT data demands by Pradeep Viswanathan The New York Times has sued OpenAI for the unauthorized use of its news articles to train large language models. As part of the ongoing lawsuit, the NYT recently asked the court to require OpenAI to retain all ChatGPT user content indefinitely. The NYT's argument is that they may find something in the data that supports their case. Brad Lightcap, COO of OpenAI, wrote the following regarding the NYT's sweeping demand: OpenAI has already filed a motion asking the Magistrate Judge to reconsider the preservation order, since indefinite retention of user data breaches industry norms and its own policies. Additionally, OpenAI has also appealed this order with the District Court Judge. Until OpenAI wins its appeal, it will be complying with the court order. The content defined by the court order will be stored separately in a secure system and will be accessed or used only for meeting legal obligations. Only a small, audited OpenAI legal and security team will be able to access this data as necessary to comply with our legal obligations. As of early 2025, ChatGPT has over 400 million weekly active users, and this data retention order will affect a significant number of them. OpenAI confirmed that ChatGPT Free, Plus, Pro, and Teams subscription users, and developers who use the OpenAI API (without a Zero Data Retention agreement) will be affected by this order. ChatGPT Enterprise, ChatGPT Edu, and API customers who are using Zero Data Retention endpoints will not be affected by this court change.
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      239
    3. 3
      snowy owl
      211
    4. 4
      ATLien_0
      211
    5. 5
      Xenon
      157
  • Tell a friend

    Love Neowin? Tell a friend!