www.webdeveloper.com
Results 1 to 13 of 13

Thread: [RESOLVED] getElementsByClass: missing the obvious?

  1. #1
    Join Date
    Jul 2010
    Location
    UK
    Posts
    28

    resolved [RESOLVED] getElementsByClass: missing the obvious?

    i cant get this to work, what am i missing??

    I'm trying to make the 'report' selection box show/hide other selection boxes using the class. (in this example i want it to hide the 'client' selecter when 'CSMR01' is selected)

    In the head:
    Code:
    function setRep(sel) {
    switch(document.getElementById("report").options[document.getElementById("report").selectedIndex].value){
    case "CSMR01":
      alert ("ok");
    	document.getElementsByClassName("test").style.display="none";
    	break;
    default:
      alert ("no");
    }
    }
    (If someone knows a simpler method of calling the selected value, feel free to comment )


    in the form:
    Code:
    <select name="report" id="report" onchange="setRep(this)">
    <option value="">Select Report</option>
    <option value="CSMR01">blah</option>
    </select>
    
    <select class="test" name="client" id="client" onchange="setBp(this)">
    <option value=".|.">blah</option>
    </select>
    help/advice much appreciated
    Share on Google+

  2. #2
    Join Date
    Jul 2010
    Location
    UK
    Posts
    28
    BTW- i can get it to work using getElementById, but i want to use classes to save referencing every element
    Share on Google+

  3. #3
    Join Date
    Jul 2010
    Location
    UK
    Posts
    28
    ah - just found this:

    http://www.robertnyman.com/2005/11/0...tsbyclassname/

    i will persist
    Share on Google+

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    Elements, there is more than one possible answer.
    Code:
    var els = document.getElementsByClassName("test");
    for (var i = 0; i < els.length; i++) {
    els[i].style.display = "none";
    }
    Share on Google+

  5. #5
    Join Date
    Jul 2010
    Location
    UK
    Posts
    28
    thanks for that Declan, it works fine. I didnt realise it wasn't natively possible to hide elements by class name without using some kind of function until after i'd posted.

    Code:
    var i = 0; i < els.length; i++
    1 question, does 'length' in this example represent the number of elements in 'els'?
    Share on Google+

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by nursa View Post
    ah - just found this:

    http://www.robertnyman.com/2005/11/0...tsbyclassname/

    i will persist
    Use this:
    Code:
    function setClassMethod(){
    if (!document.getElementsByClassName) {
    	document.getElementsByClassName = function (cn) { 
    		var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
    		var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a;
    			while (a = allT[i=i+1]) {
    			  ac=a.className;
    			  if ( ac && ac.indexOf(cn) !==-1) {
    				if(ac===cn){ allCN[allCN.length] = a; continue;   }
    				rx.test(ac) ? (allCN[allCN.length] = a) : 0;
    			  }
    			}
    		return allCN;
    	}
    }
    }
    onload= setClassMethod
    It is neat and comprehensive.

    And, yes, "length" in Declan's example represents the number of the elements in the collection. A collection of elements is very much alike an array.
    Share on Google+

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    there are a few variations on the www.

    I have this one in my default js library file and I use it by default.

    PHP Code:
    function getElementsByClassName(oElmstrTagNamestrClassName) {
        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=0i<arrElements.lengthi++)
        {
            
    oElement arrElements[i];
            if(
    oRegExp.test(oElement.className))
            {
                
    arrReturnElements.push(oElement);
            }
        }
        return (
    arrReturnElements)

    Share on Google+

  8. #8
    Join Date
    Jul 2010
    Location
    UK
    Posts
    28
    thanks both - some new stuff in there for me to experiment with
    Share on Google+

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    tirna:
    Code:
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    all is an old IE token. It is useless to test it, as all the IE versions in use have implemented getElementsByTagName() method. It is redundant

    Anyway, all the modern browsers (except IE till 8) have already implemented the native method getElementsByClassName(), so it sounds more logical to create a custom method, and only if the native method does not exist, instead of running a function which creates a collection each time you call it. It is faster to work with objects' prototypes then with simple functions.

    So, nursa, my advice is to use the first code. It is faster
    Share on Google+

  10. #10
    Join Date
    Mar 2010
    Posts
    2,803
    You're wasting my time telling me because I am not the author of that piece of code.

    I got it from the www some time ago, probably from here or a url referencing that site.

    Imo, if you have any concerns about the code you should be directing them to the author and not me.

    I will continue to use the code as is, while it works in the browsers I support.

    I don't see any point wasting my time in replacing it when I have higher priority tasks to work on

    I will continue to post it in this or other forums where I post whenever I feel it is appropriate and people can choose to use which ever version they choose.

    Basically, if it ain't broken I am not going to fix it.

    And if there are a few nano-seconds lost in its execution I am quite happy to accept that as it is not an issue for me.

    Code:
    /*
    	Written by Jonathan Snook, http://www.snook.ca/jonathan
    	Add-ons by Robert Nyman, http://www.robertnyman.com
    */
    
    function getElementsByClassName(oElm, 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)
    }
    Last edited by tirna; 07-23-2010 at 06:30 AM.
    Share on Google+

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    You're wasting my time telling me because I am not the author of that piece of code.
    Neither am I the author of that piece of code. The code I have posted is, most of it, written recently by rnd_me. At least I had the wit to switch to up-to-date pieces of codes, when I see they are better

    And, I didn't intend to waste your time, but to save nursa's time.
    Share on Google+

  12. #12
    Join Date
    Mar 2010
    Posts
    2,803
    if you didn't intend to waste my time, then I would have thought would not have directed a section of your post to me with
    tirna:


    You could have expressed your opinion without any reference to me personally if you didn't want to waste my time

    If you feel your version is better, I have no issue with that at all because imo any benefit that might or might not be there is miscroscopically tiny and so it is of no consequence to me at all which version you or other people use.

    I just post that version as another option.
    Share on Google+

  13. #13
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You talk too much. The thread is resolved.
    Share on Google+

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