$('#mapid').val($(".firstbox ul li:nth-child(" + mapi + ")").class()); is returning an undefined error that loops indefinitely…
I even tried doing: $('#mapid').val($(".firstbox ul li:nth-child(2)").class()); and the same error occurs.
The elements undoubtedly exist, and the script is positioned at the bottom of the page. No, I do not use WordPress (I saw that was a common theme regarding the error).
Here is the HTML:
<div id="map-box" class="firstbox">
<ul>
<li class="14" id="thelimit">
<div class="left">
<h1>The Limit</h1>
<span class="inf">A branching map. A mix-n match of alot of themes into one map. <p>Recommended Players: 3<br />
Author: <a href="http://www.minecraftforum.net/user/18586-timetoslide/" target="_new">timetoslide</a></p></span>
</div>
<div class="right" style="position: relative">
<div style="width: 250px; height: 120; z-index: 6; position: absolute; top: 0px; height: 120px; left: 35px; cursor: pointer" class="righthover"></div>
<div style="background: url('maps/thelimit.jpg'); width:250px;height:150px;overfow:hidden;border:none;position: relative; z-index: 1">
<div style="background: url('img/vignette.png') no-repeat center center; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2"></div>
<div class="seeList" style="width: 100%; height: 100%; background: url(img/cbg.png) repeat; color: white; font-family: Georgia, 'Times New Roman'; font-size: 24px; margin: 0; padding: 0; font-style: italic; text-align: center; z-index: 1; display: none;"><div style="padding: 20px; padding-top: 40px;">See full list of maps...</div></div>
<img src="img/border.png" style="z-index: 3" />
<div class="directions" style="z-index: 5"></div>
</div>
</div>
</li>
<li class="13" id="lavaseaofsurvival">
<div class="left">
<h1>Lava Sea of Survival</h1>
<span class="inf">Try to survive by using only the resources provided. Did we mention you're floating above lava? <p>Recommended Players: 4<br />
Author: <a href="http://www.minecraftforum.net/user/1021295-meh-own/" target="_new">Meh_Own</a></p></span>
</div>
<div class="right" style="position: relative">
<div style="width: 250px; height: 120; z-index: 6; position: absolute; top: 0px; height: 120px; left: 35px; cursor: pointer" class="righthover"></div>
<div style="background: url('maps/lavaseaofsurvival.jpg'); width:250px;height:150px;overfow:hidden;border:none;position: relative; z-index: 1">
<div style="background: url('img/vignette.png') no-repeat center center; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2"></div>
<div class="seeList" style="width: 100%; height: 100%; background: url(img/cbg.png) repeat; color: white; font-family: Georgia, 'Times New Roman'; font-size: 24px; margin: 0; padding: 0; font-style: italic; text-align: center; z-index: 1; display: none;"><div style="padding: 20px; padding-top: 40px;">See full list of maps...</div></div>
<img src="img/border.png" style="z-index: 3" />
<div class="directions" style="z-index: 5"></div>
</div>
</div>
</li>
[etc...]
There may by multiple elements in your code having class=firstbox, and some of which may not have the element you are trying to access.
In your case you can try child() function to refer to child element of element having id map-box, which may solve your problem.
http://api.jquery.com/children/