Hi John,
Sorry, this post is fairly long, what I am doing was a bit tricky to
explain. John, I know you are very busy and likely expected a short answer.
Don't feel too obligated to read though all of this....
--
Well, actually, I was trying to get the markup/elements around another group
of elements and replace them with a new wrapper. In the example below, the
wrapper element (which actually consists of several elements), that I want
to remove and re-wrap (while keeping the children) with a new set of
elements is:
<div id="panelPreview" class="fieldset_theme">
<div id="panelPreview_inner" class="hPanel">
<fieldset>
<legend>[Section/Panel Heading]</legend>
<!-- lots of additional elements (including fieldsets) here.. -->
</fieldset>
</div>
</div>
Amd it is inside a div with an id 'content' which is static.
So I wanted to get the entire '#panelPreview' object, and then I guess
traverse through it to the contents of the fieldset element (after removing
the legend), store those children and then replace the "#panelPreview" divs,
fieldset element, and legend, with my new markup.
To the end user this essentially changes the visual display of a container
element as the user selects from various pre-defined 'themes'.
The outer markup is not the same between themes; some themes use a fieldset
while others have multiple nested divs etc.
The best I could come up with was to store the js in the DB along with each
theme definition. The JS includes code to remove the existing element based
on the ID (again, because of the variation between elements I could not
create a standard script to handle this..). That string is returned via ajax
as well as the new markup for the newly selected theme. These two strings
are combined, and an '[id]' placeholder in the string replaced with the
current elements ID. The '[newContainer]' placeholder gets replaced with the
new markup from the newly selected div. Then the string is evaluated.
This is working with essentially this code below being returned from the
server:
Note: (curContent is an iframe...)
=========================================================================
//Remove fieldset legend tag
$('#[id]_inner > fieldset > legend',curContext).remove();
//Remove & Replace Container
$('#[id]',curContext).wrap([newContainer]).after($('#[id]_inner >
fieldset:first',curContext).children()).remove();"
=========================================================================
Which after being parsed results in:
=========================================================================
//Remove fieldset legend tag
$('#previewPanel_inner > fieldset > legend',curContext).remove();
//Remove & Replace Container
$('#previewPanel',curContext).wrap('<div id="newOuterDiv").after($('#
previewPanel_inner > fieldset:first',curContext).children()).remove();"
=========================================================================
This code works - but my guess is it's a mess.
This is still in test mode, I haven't gotten to far with this. I honestly am
not sure If this is a good way to do it or not or if it will be harder to
maintaiin being that the js is stored in a DB. My thought was actually to
create the [theme].js files that include the markup and then read those in
on the server and store that data in memory so requests for it are fast.
This way, also, I can have a testing area and I can simply include and edit
the js files to tweak code as opposed to getting it from the database and
upating the database each time.
Brook
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of John Resig
Sent: September 12, 2007 12:21 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: NEWBIE Question: children() skips first element?
.html() only gets the innerHTML for the first matched element. What
are you trying to do with the children?
--John
On 9/12/07, Brook Davies <[EMAIL PROTECTED]> wrote:
>
>
> Hello,
>
> I am trying to simply grab the children of a div. The markup is:
>
> <div id="content">
> <div id="panelPreview" class="fieldset_theme">
> <div id="panelPreview_inner" class="hPanel">
> <fieldset>
> <legend>[Section/Panel
> Heading]</legend>
> </fieldset>
> </div>
> </div>
> </div>
>
> But, what I don't understand is why when I call
>
> alert($('#content').children().html());
>
> The resulting html starts with '<div id="panelPreview_inner"
> class="hPanel">'
>
> It seems like it is missing the first div after #content? What am I
> missing??
>
> Brook
>
>
>
>
