Retrieve multiple elements with "getElementById"?

Question

I've tried using the techniques mentioned in these questions, but I haven't had any luck. I'm trying to adjust a JavaScript function to retrieve multiple divs using the getElementById method.

Here is the current line of code within the function which retrieves the div #cat1:

  var elem = document.getElementById(cat1);

Moving forward, I need this function to also retrieve the div #cat2.

jQuery can be loaded if there's a better method to accomplish this using their library?

Here is the full function (reference Line 3):

function getCategories(initial) {
  var i;
  var elem = document.getElementById('cat1');
  if (initial == 1) {
  jsonGroups = "";
  jsonGroups = '{ xml: [], "pin": [] ';
  for (i = 0; i < elem.childNodes.length; i++) {
    if (elem.childNodes[i].nodeName == "LI") {
      jsonGroups = jsonGroups + ',  "' + elem.childNodes[i].attributes.getNamedItem("id").value + '": [] ';
    }
  }
  jsonGroups = jsonGroups + "}";
  markerGroups = eval('(' + jsonGroups + ')');

for (i = 0; i < elem.childNodes.length; i++) {
      if (elem.childNodes[i].nodeName == "LI") {
        var elemID = elem.childNodes[i].attributes.getNamedItem("id").value;
        if (elemID != "user") {
          elem.childNodes[i].innerHTML = "<a onclick='" + 'toggleGroup("' + elemID + '")' + "'>" + elem.childNodes[i].innerHTML + "</a>";
        } else {
          elem.childNodes[i].innerHTML = '<form id="userPOIForm" action="#" onsubmit="userPOIFind(this.userPOI.value); return false"><input id="userPOITxt" size="20" name="userPOI" value="' + elem.childNodes[i].innerHTML + '" type="text"><input id="userPOIButton" value="Go" type="submit"> </form>';

        }
        if (hasClass(elem.childNodes[i], "hidden") !== null) {
          elem.childNodes[i].setAttribute("caption", "hidden");
        } else {
          elem.childNodes[i].setAttribute("caption", "");
        }
        if (elem.childNodes[i].attributes.getNamedItem("caption").value != "hidden") {
          classAdder = document.getElementById(elemID);
          addClass(classAdder, "visibleLayer");
        }
      }
    }
  }
  for (i = 0; i < elem.childNodes.length; i++) {
    if (elem.childNodes[i].nodeName == "LI") {
        var catType = elem.childNodes[i].attributes.getNamedItem("id").value;
        
      result = doSearch(elem.childNodes[i].attributes.getNamedItem("title").value, elem.childNodes[i].attributes.getNamedItem("id").value);
    }
  }
}

`.attributes.getNamedItem("id").value` can be replaced with `.id`... — Niet the Dark Absol, Dec 23 '12 at 16:18
why not use `jsonGroups` as an object not string? Can always convert to string with `JSON.stringify` if needed — charlietfl, Dec 23 '12 at 16:21

score 4 · Accepted Answer · answered Dec 23 '12 at 16:23

4

If you are trying to select all elements with an id that starts with cat, you can do this in jQuery like this:

$("[id^=cat]")

jQuery: Attributes Starts With Selector

answered Dec 23 '12 at 16:23

Jason Whitted

4,059
1
16
16

Also note that there are many other ways in which your code can be shortened by leveraging jQuery's utility methods. Things like `$("[id^=cat]".children.each(function() { $(this).prop("caption", "hidden"})` come to mind. – Confusion Dec 23 '12 at 16:28

score 2 · Answer 2 · answered Dec 23 '12 at 16:19

2

Just make categoriesList be another parameter, and call the function twice.

answered Dec 23 '12 at 16:19

Niet the Dark Absol

320,036
81
464
592

Retrieve multiple elements with "getElementById"?

2 Answers2