I've come up with a solution to make the nested lists. I'd be happy
for any comments or pointers on the code as this is still all a bit
new for me and I think that I should be able to avoid the first
enumerate through.
Thanks
<ul id="header">
<li id="green" class="groupheader">
<ul>
<li class="green">grass</li>
<li class="green">trees</li>
</ul>
<li id="blue" class="groupheader">
<ul>
<li class="blue">sky</li>
<li class="blue">sea</li>
</ul>
<li id="yellow" class="groupheader">
<ul>
<li class="yellow">sun</li>
<li class="yellow">banana</li>
</ul>
</ul>
var savedClass="";
var groups=new Array;
/* For each list item*/
jQuery("ul#header li").each(function(){
/*Identify each distinct class (or group)*/
if (jQuery(this).attr("class")!=savedClass) {
savedClass=jQuery(this).attr("class");
/*Create an array of the group/class titles*/
groups.push(savedClass);
}
});
/*Loop through all class/groups*/
for( var i = 0; i < groups.length; i++ ) {
/*Create the group header*/
jQuery('ul#header').append('<li class="groupheader" id="' +
groups[i] + '">');
/*Add all the group members to the header and wrap them in a
nested
list**/
jQuery('ul#map_header li.' + groups[i]).appendTo("#" +
groups[i]).wrapAll("<ul></ul>");
}
On Feb 20, 9:10 pm, caroig <[EMAIL PROTECTED]> wrote:
> Thanks,
> I've used it a few time. What I'm not sure about is how to identify
> the first item in each class, create a ul header for it and then add
> all the items in the class below that. I can see how I could do it if
> I had an array of the distinct classes, but I'm not sure with jQuery
> if there is a quick way of getting hold of this, without enumerating
> through all items explicitly.
>
> On Feb 20, 8:36 pm, tlphipps <[EMAIL PROTECTED]> wrote:
>
> > Might want to look at the treeview
> > plugin:http://plugins.jquery.com/project/treeview
>
> > On Feb 20, 12:11 pm, caroig <[EMAIL PROTECTED]> wrote:
>
> > > I have an app which is producing a ul something like this:-
> > > <ul>
> > > <li class="green">grass</li>
> > > <li class="green">trees</li>
> > > <li class="blue">sky</li>
> > > <li class="blue">sea</li>
> > > <li class="yellow">sun</li>
> > > <li class="yellow">banana</li>
> > > </ul>
>
> > > I want to create a group the items by the class and then enable
> > > toggling of the group along the lines of:-
>
> > > + green
> > > - blue
> > > sky
> > > sea
> > > + yellow
>
> > > I guess my best solution is to create a nested list for each class. I
> > > have some javascript that does more or less the same thing, but I'm
> > > not sure how to identify each of the classes without iterating through
> >
> the whole lot in jQuery.
