Member Avatar for joeltonnberg

Hi,

I'm currently trying to implement expanding text to links. However, as the links are created dynamically I need to be able to make the DIVs Id-tag 'general' in the script.

So, instead of this:

function pageLoad() {
collapseAll($('myvar_1','myvar_2','myvar_3));
}

I would like something like this:

function pageLoad() {
collapseAll($('myvar_#));
}

But I have no idea how to accomplish that.

Thanks

  • 2 Contributors
  • 3 Replies
  • 105 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by essential

Dani AI

Generated

Both and are on the right track: avoid hardcoding a fixed numeric range. A more robust pattern is to select the generated elements by a shared marker (an id prefix or a class) and iterate that collection — that way the script works no matter how many elements are created.

A compact, modern option is to use an attribute selector to find every element whose id starts with your prefix, then call collapseAll for each node. This avoids guessing a maximum index and keeps the DOM scan scoped to exactly the elements you care about.

document.addEventListener('DOMContentLoaded', function () {
  var nodes = document.querySelectorAll('[id^="myvar_"]');
  nodes.forEach(function (el) {
    // call collapseAll with whatever it expects:
    // if it accepts a DOM element:
    collapseAll(el);
    // if it expects an id string, use el.id
  });
});

A slightly cleaner pattern is to give generated DIVs a class such as expandable (server-side or during creation) and select by class; that simplifies styling and behavior hooks. If collapseAll comes from a library that expects a library-wrapped element (jQuery/Prototype), detect and wrap the element before calling the function.

if (window.jQuery) {
  collapseAll(jQuery(el));
} else {
  collapseAll(el);
}

Notes and troubleshooting:

  • querySelectorAll with the prefix selector ([id^="..."]) is reliable and avoids iterating over every div on the page — see the MDN docs for details: Document.querySelectorAll and CSS attribute selectors.
  • Run the selection after the DOM is ready (DOMContentLoaded) and check what type collapseAll expects (element, id string, or library object) before changing calls.
  • For large numbers of elements, limit the selector to the container element to reduce work and avoid performance problems.

Recommended Answers

All 3 Replies

Member Avatar for essential

You can perform loop on the specified element's, like this:

function pageLoad() {
var elem = document.getElementsByTagName("div"); // any reference that you can provide 

   for ( var x = 0; x < elem.length; x++ ) {
   collapseAll($('myvar_'+x));
   }
}
Member Avatar for joeltonnberg

Thanks for your reply, it seems to be the way to go. One problem remains however. As the div-tags id are set dynamically it has to be accounted for in the script.

Hence the tag-name "div" does not exist as it is div1, div2, div3 etc. var elem = document.getElementsByTagName("div"); It needs to be identical with:

for ( var x = 0; x < elem.length; x++ ) {
   collapseAll($('div_'+x));
Member Avatar for essential

Then you'll have to specify the incrementing value.

for (var x = 0; x < 10; x++) {
collapseAll($('div_' + x)); }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.