Try this:
$(function() {
$("div.accordion h3").each( function() {
$(this).nextAll().wrapAll("<div class='accordionInner'></div>");
});
});
The problem was that "wrapAll" was wrapping up all the elements of all
the accordion DIVs into one.
Sidenote: The sample webpage was a bit messed up, it didn't have a
head or body, the script tags where inside the body, and the jquery.js
file wasn't actually present (404 error). I assume it's just some copy
paste errors.
Karl Rudd
On 2/14/07, Nathan Young -X (natyoung - Artizen at Cisco)
<[EMAIL PROTECTED]> wrote:
> I posted my sample HTML here:
>
> http://ncyoung.com/temp/simplify.html
>
>
>
> .:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:
> ||:.
>
> Nathan Young
> Cisco.com->Interface Development
> A: ncy1717
> E: [EMAIL PROTECTED]
>
> > -----Original Message-----
> > From: [EMAIL PROTECTED]
> > [mailto:[EMAIL PROTECTED] On Behalf Of Nathan Young
> > -X (natyoung - Artizen at Cisco)
> > Sent: Tuesday, February 13, 2007 10:55 AM
> > To: jQuery Discussion.
> > Subject: Re: [jQuery] wrapping or cloning problem
> >
> > Hi John.
> >
> > Thanks for taking a stab at this! Your solution does fit my problem
> > statement, and I agree it's a clever approach.
> >
> > I grabbed the function you sent and I got wrapall from the
> > URL you sent.
> >
> > I'm not getting good behavior overall from it and I'm new enough to
> > jQuery that I can't tell where the problem lies... probably between my
> > eyes and keyboard :)
> >
> > I'm attaching an HTML file with my attempt (and some commented out
> > cruft), and I hope it makes it through the mailer. If it
> > doesn't let me
> > know and I'll find somewhere to post it.
> >
> > Also I can't help thinking that preparing the right "each" callback
> > function could let me do this with core jQuery and avoid writing
> > extension functions.
> >
> > I'm encountering something a little strange with each
> > functions though.
> > This works fine:
> >
> > $("[EMAIL PROTECTED]").each(function(i){$(this).prepend("h
> > ey!");)});
> >
> > I get a "hey" inside and at the start of each accordion div.
> >
> > When I add this line:
> >
> > $("[EMAIL PROTECTED]").each(function(i){$(this).prepend("h
> > ey!");$(th
> > is).prepend($(this).children("div/h3").clone())});
> >
> > Not only does the second thing not work (and I've racked my brains
> > trying a variety of constructions there), but I stop getting
> > consistent
> > "hey"'s in the right places.
> >
> > ---------->Nathan
> >
> >
> > .:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:.
> > _.:||:._.:
> > ||:.
> >
> > Nathan Young
> > Cisco.com->Interface Development
> > A: ncy1717
> > E: [EMAIL PROTECTED]
> >
> > > -----Original Message-----
> > > From: [EMAIL PROTECTED]
> > > [mailto:[EMAIL PROTECTED] On Behalf Of John Resig
> > > Sent: Monday, February 12, 2007 11:32 PM
> > > To: jQuery Discussion.
> > > Subject: Re: [jQuery] wrapping or cloning problem
> > >
> > > Hi Nathan -
> > >
> > > I'll take a stab at it!
> > >
> > > A while back I wrote a nifty little pair of plugins:
> > > http://john.jquery.com/jquery/test/nextuntil.html
> > >
> > > .nextUntil() and .wrapAll(). wrapAll is perfect for you,
> > > unfortunately, nextUntil won't do the trick - you need a .nextAll()
> > >
> > > So here's a .nextAll:
> > >
> > > $.fn.nextAll = function() {
> > > var match = [];
> > >
> > > // We need to figure out which elements to push onto the array
> > > this.each(function(){
> > > // Traverse through the sibling nodes
> > > for( var i = this.nextSibling; i; i = i.nextSibling ) {
> > > // Make sure that we're only dealing with elements
> > > if ( i.nodeType != 1 ) continue;
> > >
> > > // Otherwise, add it on to the stack
> > > match.push( i );
> > > }
> > > });
> > >
> > > return this.pushStack( match );
> > > };
> > >
> > > And now we can do this:
> > > $("div.accoridan h3").nextAll().wrapAll("<div
> > > class='accordianInner'></div>");
> > >
> > > I think that's a pretty nifty solution :-) Let me know if
> > you want me
> > > to setup a demo.
> > >
> > > --John
> > >
> > > On 2/12/07, Nathan Young -X (natyoung - Artizen at Cisco)
> > > <[EMAIL PROTECTED]> wrote:
> > > > Hi All.
> > > >
> > > > I want to accordion an existing content format, and I think
> > > that I need
> > > > to insert a wrapper element. First I would love a sanity
> > > check on my
> > > > general approach then maybe someone can critique the
> > > manipulation I'm
> > > > trying.
> > > >
> > > > Here's my content:
> > > >
> > > > <div class="accordion">
> > > > <h3>heading</h3>
> > > > <arbitrary content/>
> > > > </div>
> > > >
> > > > I can't change the content and I need the heading to be
> > used as the
> > > > clickable bar.
> > > >
> > > > The approach I want to take (on a high level) is:
> > > > - put a div around everything after the h3 in the dives classed
> > > > "accordion"
> > > > - put events on the h3 to show the associated div and hide the
> > > > non-associated divs
> > > >
> > > > The js I would use is something like:
> > > >
> > > >
> > > $("[EMAIL PROTECTED]").removeClass("accordion").addClass("
> > > accordionI
> > > > nner");
> > > > $("[EMAIL PROTECTED]").wrap('<div
> > > class="accordion"></div>');
> > > >
> > > > //no luck here:
> > > >
> > > $("div:[EMAIL PROTECTED]").each(function(i){$(this).prepend($
> > > (this).chi
> > > > ldren("[EMAIL PROTECTED]:firstChild)})
> > > >
> > > > //nor with this:
> > > >
> > > $("[EMAIL PROTECTED]").each(function(i){$(this).children("
> > > [EMAIL PROTECTED]
> > > > =accordionInner]:first-child").clone().prependTo(this)})
> > > >
> > > >
> > > > All suggestions welcome!
> > > >
> > > > ----------->Nathan
> > > >
> > > >
> > > >
> > > >
> > > .:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:.
> > > _.:||:._.:
> > > > ||:.
> > > >
> > > > Nathan Young
> > > > Cisco.com->Interface Development
> > > > A: ncy1717
> > > > E: [EMAIL PROTECTED]
> > > >
> > > > _______________________________________________
> > > > jQuery mailing list
> > > > discuss@jquery.com
> > > > http://jquery.com/discuss/
> > > >
> > >
> > > _______________________________________________
> > > jQuery mailing list
> > > discuss@jquery.com
> > > http://jquery.com/discuss/
> > >
> >
> > _______________________________________________
> > jQuery mailing list
> > discuss@jquery.com
> > http://jquery.com/discuss/
> >
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
