/    Sign up×
Community /Pin to ProfileBookmark

Help with matching HTML elements with increasing digits

OK I have a script that works fine but I want the script to work on a number of similar elements on the same page. The elements are divs with IDs of ‘container1’, ‘container2’, ‘container3’ etc etc

So in the script is this line:

[code=html]document.getElementById(container[n]);[/code]

so it needs to be able to identify each container and their only difference is the last digit.

I’m pretty poor at writing new Javascript and don’t know it very well but I thought it could be done using regular expressions? I’ve learnt this area of js, but not too well coz I can’t get it to work. Which is annoying as hell coz I know this is soooooooooooo easy. 😑

Help please ?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesMay 13.2005 β€”Β document.getElementById('container' + n)
Copy linkTweet thisAlerts:
@richiebmanauthorMay 13.2005 β€”Β Thanks for replying Charles but what is n?
Copy linkTweet thisAlerts:
@CharlesMay 13.2005 β€”Β You the one that started the whole "n" thing. I prefer "i".<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">
<!--
if (document.getElementById) onload = function () {
var e, i = 1;
while (e = document.getElementById ('span' + i++)) {e.className = 'highlight'}
}
// -->
</script>

<style type="text/css">
<!--
.highlight {background-color:#ff0}
-->
</style>

</head>
<body>
<p>Duis <span id="span1">autem</span> vel eum iriure dolor in <span id="span2">hendrerit</span> in vulputate velit esse molestie <span id="span3">consequat</span>, vel illum dolore eu <span id="span4">feugiat</span> nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</body>
</html>
Copy linkTweet thisAlerts:
@richiebmanauthorMay 14.2005 β€”Β Thanks for replying again Charles. I had already tried using loops but the rest of the script gets a bit complicated and creates more problems. I'm sure there is a way around it but I have decided to design the pages differently so that it doesn't require what I was first asking for. And it is actually a better design. Suppose sometimes problems make you think a little differently and come up with better solutions :rolleyes: .

Any hoo thanks and no I wasn't the one who started the whole "n" thing. But I have just worked out what the "i" stands for. I'm hoping "integer". I was going with "number" ? .
Copy linkTweet thisAlerts:
@SpectreReturnsMay 14.2005 β€”Β <i>
</i>for ($i=1;$i&lt;=3;$i++) {
document.getElementById('container'+$i).DOWHATEVERHERE;
}
Γ—

Success!

Help @richiebman spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 β€” BETA 5.17,
whats_new: community page,
up_next: more Davinciβ€’003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinciβ€’003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...