[solved] Iterate through "great-grandchildren" elements

here you will find only solved Help topics

Moderator: 1.2 Moderators

[solved] Iterate through "great-grandchildren" elements

Postby skadeedle on Sat Oct 18, 2008 1:01 am

Forgive me for asking a basic question, but I am a newbie and there is something I cannot for the life of me figure out how to do.

I'm working on a slide show script in Mootools 1.2. ("Why?" you ask. Because I need one that (1) accommodates multiple independent slide shows on the same page, (2) shows HTML slides and/or images, (3) offers tabbed navigation as well as previous/next buttons, and (3) degrades nicely when JS is off. There are many that have one or two of these features, but I haven't found a single one that has all four of them. If you know of one, let me know!)

The HTML for the slide shows looks like this:

  1. <div class="slideShow" id="slideShow1">
  2.     <ul><li>Slide 1 title
  3.         <ul><li>Slide 1 content</li></ul>
  4.     </li></ul>
  5.     <ul><li>Slide 2 title
  6.         <ul><li>Slide 2 content</li></ul>
  7.     </li></ul>
  8.     ....
  9. </div>


In initializing the slide shows, I need to hide all of the inner <ul> tags on a page, i.e. the "div.slideShow ul li ul"s (to borrow CSS's nomenclature), except for the first slide in in each slide show (on a page with more than one show). I'm assuming that I need to iterate through the slide shows:

  1.  
  2. var slideShows = $$('.slideShow');
  3. slideShows.each(function(slideShow){
  4.     ....
  5. });
  6.  


and then, for each slide show, iterate through the "ul li ul"s, ignoring the first one and hiding all the rest. But I can't figure out how to grab all of the "div.slideShow ul li ul"s for a particular slide show. Also, once I have an array of slides for a given show, I need to iterate through them in such a way that I can do something different to the first

Any pointers would be much appreciated.
Last edited by skadeedle on Sat Oct 18, 2008 4:04 pm, edited 1 time in total.
skadeedle
 
Posts: 9
Joined: Sat Oct 18, 2008 12:39 am

Re: Iterate through "great-grandchildren" elements

Postby skadeedle on Sat Oct 18, 2008 1:49 am

I came up with a way to do it, but the iteration part seems very clunky:

  1.  
  2. var slideShows = $$('.slideShow');
  3. slideShows.each(function(slideshow){
  4.     var slides = slideShow.getElements('ul li ul');
  5.     for (i=0;i<slides.length;i++) {
  6.         if (i==0) {
  7.             slides[i].setStyle('display', 'block');
  8.         } else {
  9.             slides[i].setStyle('display', 'none');
  10.         }
  11.     }
  12.  


In particular, I hate running the if/else for each iteration. I also tried the following, but it didn't work properly:

  1.  
  2.     var slides = slideShow.getElements('ul li ul');
  3.     slides.setStyle('display', 'none');
  4.     slides.getFirst().setStyle('display', 'block');
  5.  


Any idea why that wouldn't work? Any suggestions re more efficient ways to do this? Any suggestions re slide shows that already have all the features I need (see list above)?

Many thanks again.
skadeedle
 
Posts: 9
Joined: Sat Oct 18, 2008 12:39 am

Re: Iterate through "great-grandchildren" elements

Postby daKmoR on Sat Oct 18, 2008 11:03 am

you could try to filter the elements so you return only the once you need...
  1. var slides = slideShow.getElements('ul li ul').filter(function(item, index) {
  2.   return index > 0;
  3. }); //returns all elements except the first one
  4. slides.setStyle('display', 'none')

or you can do it as you suggested... set a value for all and override it for certain once afterward.
  1. var slides = slideShow.getElements('ul li ul');
  2. slides.setStyle('display', 'none');
  3. slides[0].setStyle('display', 'block');
"Speak when you are angry and you will make the best speech you will ever regret." - Ambrose Bierce
User avatar
daKmoR
Site Admin
 
Posts: 860
Joined: Mon Jul 14, 2008 11:40 am

[solved] Iterate through "great-grandchildren" elements

Postby skadeedle on Sat Oct 18, 2008 4:03 pm

Thanks! I went with:

  1.  
  2. slides.setStyle('display', 'none');
  3. slides[0].setStyle('display', 'block');
  4.  


which works perfectly. Can't figure out why slides.getFirst()... doesn't work, but I like the slides[0] notation better anyway. Don't know why that didn't occur to me.

Love mootools, BTW.
skadeedle
 
Posts: 9
Joined: Sat Oct 18, 2008 12:39 am


Return to Solutions

Who is online

Users browsing this forum: No registered users and 1 guest