Using CSS Wildcard in GetElementById

This site is best viewed in a modern browser with JavaScript enabled.

ETpro

I want to set up a large section page with perhaps as many as several hundred items showing thumbnail image, link to item page, and info in text about the item. The sections will be dynamically generated on the server side from a database of items. I need to be able to use JS to grab the content of selected DIVs into an array for disp[lay in a right column. So I am thinking to set up a JavaScript that can read an array of DIVs that have been selected by the user checking a checkbox within each individual one they want added to their collection. This MUST be done in JavaScript, not server side.

I might assign each a sequentially IDed DIV like <div id="itm1"> and <div id="itm2"> and so forth. Can I use wildcards both for CSS styling of an unknown number of DIVs and for reading reviewing an unknown number of them using getElementById?

I don't think getElementByTag will work because there are other DIVs I do not want, and GetElementByName won't work because Name is not a valid attribute for a DIV. Or should I assign each of the IDs a class, and use getElementsByClassName? What's the most logical appraoch?

tirna

I would give the appropriate divs a class name and then use a JS function to get those divs.

 
function getElementsByClassName(document, strTagName, strClassName) {
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "([URL="file:///s:$"]\\s|$[/URL])");
    var oElement;
    for(var i=0; i<arrElements.length; i++)
    {
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className))
        {
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

ETpro

Thanks. That is very helpful. I wanted to be certain I wasn't painting myself into a corner with no door.

rnd_me

document.querySelectorAll("#vB_Editor_QR_textarea, #collapseobj_quickreply");

tirna

I just saw an....oooooooops.!! :eek: in the code I posted.

 
function getElementsByClassName(document, strTagName, strClassName) {

should be

 
function getElementsByClassName(oElm, strTagName, strClassName) {

To use the function you use something like:

 
var myDivs = getElementsByClassName(document, 'div', 'some_class_name') ;

I've spanked my proof reader and if it happens again I said I will get a new one

ETpro

I am indeed in your debt, trina. Thanks.

tirna

no problem - glad to help