addClass not working

I'm a newbie with jQuery so please be gentle

I cannot apply css classes properly. My example below is supposed to grab all 'div.box' elements and wrap them in 2 divs which have a red and green border. The 'outer' class is applied, but not the 'inner' class. If the 'inner' class is defined as 'div.inner {border:1px solid green;}' it works, but I want it defined as it is below.

The css and script is as follows ...

<style>
div.outer {border:1px solid red;}
div.outer div.inner {border:1px solid green;}
</style>

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("div.box").each(function() {
var boxinner = $(this).wrap("<div></div>").addClass("inner");
var boxouter = $(this).wrap("<div></div>").addClass("outer");
});
});
</script>

HTML is as follows ...

<div class="box">Hello</div>
<div class="box">Good Bye</div>

Any help will be greatly appreciated.

• Topic Participants

• grahamsimmons

• robinelst