count span elements where ID has prefix and draw more

sushestvo

06-29-2006, 02:31 PM

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

Beagle

06-29-2006, 03:34 PM

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:

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

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.

JUD

06-29-2006, 03:56 PM

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.

<!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

Bill Posters

06-29-2006, 04:08 PM

Beagle

06-29-2006, 04:53 PM

Bill Posters

06-29-2006, 05:08 PM

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

JUD

06-29-2006, 10:50 PM

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:

<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.

<!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>