www.webdeveloper.com
Results 1 to 7 of 7

Thread: Using CSS Wildcard in GetElementById

  1. #1
    Join Date
    Nov 2009
    Location
    Boston, MA, USA
    Posts
    52

    Using CSS Wildcard in GetElementById

    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?
    Last edited by ETpro; 04-16-2010 at 04:20 PM.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    I would give the appropriate divs a class name and then use a JS function to get those divs.

    Code:
     
    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 + "(\\s|$)");
        var oElement;
        for(var i=0; i<arrElements.length; i++)
        {
            oElement = arrElements[i];
            if(oRegExp.test(oElement.className))
            {
                arrReturnElements.push(oElement);
            }
        }
        return (arrReturnElements)
    }

  3. #3
    Join Date
    Nov 2009
    Location
    Boston, MA, USA
    Posts
    52
    Thanks. That is very helpful. I wanted to be certain I wasn't painting myself into a corner with no door.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    document.querySelectorAll("#vB_Editor_QR_textarea, #collapseobj_quickreply");

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    I just saw an....oooooooops.!! in the code I posted.

    Code:
     
    function getElementsByClassName(document, strTagName, strClassName) {
    should be

    Code:
     
    function getElementsByClassName(oElm, strTagName, strClassName) {
    To use the function you use something like:

    Code:
     
    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

  6. #6
    Join Date
    Nov 2009
    Location
    Boston, MA, USA
    Posts
    52
    I am indeed in your debt, trina. Thanks.

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    no problem - glad to help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles