Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    count span elements where ID has prefix and draw more

    I have N amount of SPAN elements on the page where ID always starts like 'Elm' and then number, up to 7 of those.
    I need to be able to count how many there are already on the page and if there is less than 7 then draw on the bottom of existing once more one by one, click of a button (can use break; after each draw... not a problem), till it hits 7 and then it won't draw anymore but give maybe an error or say limit reached.
    How can i do this? I know eval function could help but I have no clue how.
    Please help

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    you can't do pattern matching on IDs, but instead, you can give all the elements that are to be grouped the same name:

    <span id="elem_1" name="group1"></span>
    <span id="elem_2" name="group1"></span>
    <span id="elem_3" name="group1"></span>

    And then you can use:

    var spanGroup1 = document.getElementsByName("group1");

    you can then get the length of the array returned:

    if (spanGroup1.length < 7)

    As for the rest of your task, it would make sense to keep all of your spans in a single container element if that's possible:

    Code:
    <div id="group1container">
      <span name="group1"></span>
      <span name="group1"></span>
    </div>
    Then you can append a new span to the end of the container:

    Code:
    if (spanGroup1.length < 7)
    {
      var newSpan = document.createElement("span");
      newSpan.name = "group1":
      document.getElementById("group1container").appendChild(newSpan);
    }
    else
    {
      alert("I'm sorry user, I'm afraid I can't do that.");
    }
    Hope that helps.

  • #3
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You CAN do pattern matching on ids. This code counts all the span elements in the document and then loops through them to find all the ones whos ids match the pattern /^Elm\d/. If it counts less than 7 it then adds one to the bottom of the page in a new paragraph.

    Tested this code in IE6 and firefox.

    Works fine.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    // <![CDATA[ //
    	function addSpan(){
    		var i, count = document.getElementsByTagName("SPAN");
    		var countElm = 0;
    		for(i = 0; i < count.length; i++){
    			if(count[i].id.match(/^Elm\d/)){
    				countElm++;
    			}
    		}
    		if(countElm < 7){
    			var newPar = document.createElement("P");
    			var newSpan = document.createElement("SPAN");
    			newSpan.setAttribute("id", "Elm" + (countElm + 1));
    			var newTxt = document.createTextNode("Elm" + (countElm + 1));
    			newSpan.appendChild(newTxt);
    			newPar.appendChild(newSpan);
    			document.body.appendChild(newPar);
    		}else{
    			alert("You have reached the maximum number of span elements");
    		}
    	}
    // ]]> //
    </script>
    </head>
    
    <body>
    <button onclick="addSpan()">Click to add Span Elements</button>
    <p><span id="Elm1">Elm1</span></p>
    <p><span id="Diff">This span elements id is different</span></p>
    </body>
    </html>
    Hope it's what your looking for
    JUD
    Last edited by JUD; 06-29-2006 at 05:19 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Beagle
    you can't do pattern matching on IDs, but instead, you can give all the elements that are to be grouped the same name:

    <span id="elem_1" name="group1"></span>
    <span id="elem_2" name="group1"></span>
    <span id="elem_3" name="group1"></span>
    …not if you want to finish up with a valid document, you can't.

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    To clarify, I meant you couldn't do pattern matching on IDs within document.getElementById.

    Iterating over every span in the document to find 7 can be terribly inefficient if you use spans anywhere else, which is why I almost NEVER use that technique. If I have a page with 35 spans, why should I have to loop over all of them AND do a regular expression match on each of them?

    And you're right about validation, in that the name attribute does not exist for spans. A better way to group spans to save on your efficiency is to put them in a container and call getElementsByTagName on that element instead of the whole document:

    Code:
    <div id="x">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    
    <script type="text/javascript">
    var spansICareAbout = document.getElementById("x").getElementsByTagName("span");
    </script>

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Fwiw, if you're searching for a simple string matches (e.g. elem_), it's reportedly* more efficient to use indexOf than a regEx match.

    * Here's an article detailing a number of ways you can make loops, iterations and string matches more efficient.
    http://userjs.org/help/tutorials/efficient-code

  • #7
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Beagle
    To clarify, I meant you couldn't do pattern matching on IDs within document.getElementById.

    Iterating over every span in the document to find 7 can be terribly inefficient if you use spans anywhere else, which is why I almost NEVER use that technique. If I have a page with 35 spans, why should I have to loop over all of them AND do a regular expression match on each of them?

    And you're right about validation, in that the name attribute does not exist for spans. A better way to group spans to save on your efficiency is to put them in a container and call getElementsByTagName on that element instead of the whole document:

    Code:
    <div id="x">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    
    <script type="text/javascript">
    var spansICareAbout = document.getElementById("x").getElementsByTagName("span");
    </script>
    The example above was just a general way to do what sushestvo was after.

    It can easily be adapted to target a certain group of span elements within a div.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    // <![CDATA[ //
    	function addSpan(elem){
    		var i, count = elem.getElementsByTagName("SPAN");
    		var countElm = 0;
    		for(i = 0; i < count.length; i++){
    			if(count[i].id.match(/^Elm\d/)){
    				countElm++;
    			}
    		}
    		if(countElm < 7){
    			var newPar = document.createElement("P");
    			var newSpan = document.createElement("SPAN");
    			newSpan.setAttribute("id", "Elm" + (countElm + 1));
    			var newTxt = document.createTextNode("Elm" + (countElm + 1));
    			newSpan.appendChild(newTxt);
    			newPar.appendChild(newSpan);
    			elem.appendChild(newPar);
    		}else{
    			alert("You have reached the maximum number of span elements");
    		}
    	}
    // ]]> //
    </script>
    </head>
    
    <body>
    <div>
    <button onclick="addSpan(this.parentNode)">Click to add Span Elements</button>
    <p><span id="Elm1">Elm1</span></p>
    <p><span id="Diff">This span elements id is different</span></p>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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