You could also do this:
$('h2').after('<div class="someclass"></div>').each(function(){
var _this = $(this);
_this.nextAll(':not(div.someclass)').each(function(){
var _that = $(this);
if(!_that.is('h2')){_that.appendTo(_this.next());}else{return
false;}
});
});
I wrote this on a whim and figured it would be much slower than John
Resig's nextUntil() plugin, but it turns out to be only about 0.8ms
slower on average.
On Feb 19, 7:51 pm, ricardobeat <ricardob...@gmail.com> wrote:
> Yeah, the browser will try to fix the mark-up you insert. You can't
> just treat HTML as text unless you are actually building a string for
> inserting via html/append.
>
> cheers,
> - ricardo
>
> On Feb 19, 10:16 pm, Charlie Griefer <charlie.grie...@gmail.com>
> wrote:
>
> > Ricardo - thanks for clarifying on the insertion.
> > So... when i tried to do $(element).after('<div class="foo">'); ... was it
> > automagically closing the element? I added $(element).after('<div
> > class="foo">bar'); and saw the text "bar" appear... so even tho it was
> > invalid HTML, it still inserted something. Just curious about what was
> > going on there.
>
> > the nextUntil looks -very- cool.
>
> > Thanks,
> > Charlie
>
> > On Thu, Feb 19, 2009 at 4:59 PM, Ricardo Tomasi
> > <ricardob...@gmail.com>wrote:
>
> > > You can't insert invalid HTML into the DOM.
>
> > > Use the nextUntil plugin by John Resig (I'm starting to think this
> > > belongs in the core):
>
> > > $.fn.nextUntil = function(expr) {
> > > var match = [];
> > > this.each(function(){
> > > for( var i = this.nextSibling; i; i = i.nextSibling ) {
> > > if ( i.nodeType != 1 ) continue;
> > > if ( jQuery.filter( expr, [i] ).length ) break;
> > > match.push( i );
> > > }
> > > });
> > > return this.pushStack( match, arguments );
> > > };
>
> > > then you can do this:
>
> > > $('h2').each(function(){
> > > $(this).nextUntil('h2').wrapAll('<div class="contents" />');
> > > });
>
> > > cheers,
> > > - ricardo
>
> > > On Feb 19, 8:21 pm, Charlie Griefer <charlie.grie...@gmail.com> wrote:
> > > > No answer yet. I've tried playing around with using:$('h2').after('<div
> > > > class="someclass">');
> > > > $('h2:not(:first)').before('</div>');
>
> > > > but that doesn't seem to be working (and is also problematic because it
> > > > leaves an open <div> after the last h2).
>
> > > > it seems that the after() and before() methods each want to insert a
> > > > full
> > > > element (opened and closed). i can't tell, but i get the impression
> > > > that
> > > > jQuery is closing the <div class="someclass"> div automatically.
>
> > > > hoping somebody else might jump in with a more elegant (and
> > > correct/working)
> > > > solution.
>
> > > > On Thu, Feb 19, 2009 at 3:17 PM, cchun...@gmail.com <cchun...@gmail.com
> > > >wrote:
>
> > > > > Ok i have tried
>
> > > > > $('.tabs h2').next().wrapAll('<div class="tabbody"></div>');
>
> > > > > but it does not want to wrap all the paragraphs/tables/html in the one
> > > > > div.
>
> > > > > Any ideas?
>
> > > > > Thanks for the help!
>
> > > > > On Feb 19, 12:21 pm, Charlie Griefer <charlie.grie...@gmail.com>
> > > > > wrote:
> > > > > > actually i should clarify... not "change", but wrap the elements
> > > > > following
> > > > > > h2 elements with the specified HTML.
>
> > > > > > On Thu, Feb 19, 2009 at 10:00 AM, Charlie Griefer <
> > > > > charlie.grie...@gmail.com
>
> > > > > > > wrote:
> > > > > > > On Thu, Feb 19, 2009 at 9:27 AM, cchun...@gmail.com <
> > > > > cchun...@gmail.com>wrote:
>
> > > > > > >> I am trying to look through content in a div and if i find an H2
> > > or
> > > > > > >> whatever attribute the content or HTML that follows it will be
> > > > > > >> encloded in a div with a class. I will do this for every H2 so if
> > > i
> > > > > > >> have 3 H2's and some paragraphs after them it will surround all
> > > HTML
> > > > > > >> after each of the H2 in a div.
>
> > > > > > > This will change the element following all h2 elements in the doc.
>
> > > > > > > <script>
> > > > > > > $(function() {
> > > > > > > $('h2').next().wrap('<div class="someclass"></div>');
> > > > > > > });
> > > > > > > </script>
>
> > > > > > > If you want it to be just within a certain div, and assuming that
> > > div
> > > > > has
> > > > > > > an id attribute of "foo", it would be:
>
> > > > > > > <script>
> > > > > > > $(function() {
> > > > > > > $('#foo h2').next().wrap('<div class="someclass"></div>');
> > > > > > > });
> > > > > > > </script>
>
> > > > > > > --
> > > > > > > I have failed as much as I have succeeded. But I love my life. I
> > > love
> > > > > my
> > > > > > > wife. And I wish you my kind of success.
>
> > > > > > --
> > > > > > I have failed as much as I have succeeded. But I love my life. I
> > > > > > love
> > > my
> > > > > > wife. And I wish you my kind of success.- Hide quoted text -
>
> > > > > > - Show quoted text -
>
> > > > --
> > > > I have failed as much as I have succeeded. But I love my life. I love my
> > > > wife. And I wish you my kind of success.
>
> > --
> > I have failed as much as I have succeeded. But I love my life. I love my
> > wife. And I wish you my kind of success.
