Thanks for the reply.
What I would like to do is to reduce the page´s mark-up in general
because there are going to be more-or-less 7-8 of these boxes on the
home page (excluding the other content. These boxes have rounded
corners, hence the empty tr, tl, bl, br divs. What I would like to do
is to just add <div class="box"> and it´s content and have jQuery take
care of inserting the necessary mark-up to complete the box. I know it
seems silly but I want to keep the code as clean as possible without
repeating the same thing over and over in the mark-up.
Like this:
<div class="box">
<h3>Some header</h3>
<img name="Image" src="photo.jpg" width="268" height="122"
alt="" /
<p>Lorem ipsum dolor sit amet.</p>
</div>
As apposed to this:
<div class="box-two">
<div class="inside">
<h3>Some header</h3>
<img name="Image" src="photo.jpg" width="268" height="122"
alt="" /
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
</div>
As you can see, it is less cluttered.
I have managed to get jQuery to apply the mark-up to all the divs with
class of "box" by swapping the order of the code from this:
$(document).ready(function(){
$("div.box").each(function() {
$("div.box> *").wrapAll('<div class="inside"></div>');
$("div.box").append('<div class="tl"></div>'+'<div
class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></div>');
});
});
to this:
$(document).ready(function(){
$("div.box").each(function() {
$("div.box").append('<div class="tl"></div>'+'<div
class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></div>');
$("div.box> *").wrapAll('<div class="inside"></div>');
});
});
For some reason when the wrap function is placed after the append
function it works.
The only problem I have now is that the css does not hook into the
mark-up properly. Now when I have a 2nd instance of "box" directly
after the other, they overlap each other slightly ignoring the bottom-
margin of 1em of "box". If I remove the jQuery from the page and place
the mark-up into the page itself, the css is properly applied and
works the way it should. Very odd!
On Sep 27, 4:20 pm, Jonathan <[EMAIL PROTECTED]> wrote:
> If you used each then it should repeat for each DIV with the class of
> box on the page.
>
> $(document).ready(function(){
> $("div.box").each(function() {
> $("div.box> *").wrapAll('<div class="inside"></div>');
> $("div.box").append('<div class="tl"></div>'+'<div
> class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></
> div>');
> });
>
> });
>
> What exactly are you trying to achieve though? Couldn't you just have
> all the DIVs laid out already and then style them with CSS to make
> them look the same?
>
> On Sep 26, 2:17 pm,thelemondropkid<[EMAIL PROTECTED]> wrote:
>
> > Thanks to the help I have received on this group, I am making
> > progress.
> > But now that all is working fine, the question beckons: Can jQuery do
> > it all over again?
>
> > This is my code:
>
> > <div class="box">
> > <h3>some header</h3>
> > <img name="Image" src="photo.jpg" width="268" height="122" alt="" /
>
> > <p>Lorem ipsum dolor sit amet.</p>
> > </div>
>
> > And the jQuery:
>
> > $(document).ready(function(){
> > $("div.box> *").wrapAll('<div class="inside"></div>');
> > $("div.box").append('<div class="tl"></div>'+'<div class="tr"></
> > div>'+'<div class="bl"></div>'+'<div class="br"></div>');
>
> > });
>
> > The problem:
>
> > I would have thought that jQuery would repeat the above process if I
> > created another div with a class of "box" below the previous one. I
> > was wrong!
>
> > Is there a way to do that because I would like to create various boxes
> > with a class of "box" and have them all look the same.
>
> > Thanks folks
