Targeting all li's instead of just the first

Question

I'm using the Superslides script to create a responsive slideshow for a site. I have created a basic caption box that I want to be hidden and then slide in from the bottom when the slide going with the caption is display.

In the Superslide script the current slide gets a higher z-index (of 2, otherwise it is set to 0) and a display: block (otherwise 'none') change to it when it's coming into view.

I am not very good with Javascript so I am having a bit of trouble targeting my captions to animate in at the right time. I put together a script that is supposed to evaluate all the li tags (each li is a different slide) and if it has a z-index of 2 it changes the bottom margin of the caption div so it slides into view. My problem is that my script only targets the very first li instead of running through all of them. For the first li it works great, I just need it to run though the rest of the li's as well. Any suggestions are appreciated!

Script:

var li = document.querySelector('li[style]'),
    inlinezIndex = li.style.zIndex;
    console.log(inlinezIndex);
   if(inlinezIndex == 2){
       document.getElementById('caption').style.bottom = '300px';
       $('#caption').css({'transition': '10s'});
   }
   else{
       document.getElementById('caption').style.bottom = '0px';
   }

HTML:

<div id="slides">
    <ul class="slides-container">
      <li class="slide1">
          <img src="images/people.jpeg" alt="Cinelli">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work1</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work1</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work2</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work3</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work4</p>
          </div>
      </li>
    </ul>

    <nav class="slides-navigation">
      <a href="#" class="next"><i class="icon-chevron-right"></i></a>
      <a href="#" class="prev"><i class="icon-chevron-left"></i></a>
    </nav>
  </div>

Do you have a live demo of yours? It would be more easier to help you out. — divy3993, Sep 24 '15 at 19:33
When you have jQuery loaded on to the page, try and use all of jQuery as it would reduce the amount code you write. — lshettyl, Sep 24 '15 at 20:00

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

Try using querySelectorAll instead of querySelector.

You could then loop through the li's and apply your styling, etc.

Also I see you are using multiple elements with the same id ("caption") and this is bad practice. Actually, I think it's invalid HTML according to the HTML5 specification as id's are supposed to be unique (look at this stackoverflow thread).

Example

var list = document.querySelectorAll('.slides-container li');
for (var i = 0; i < list.length; i++) {
    var li = list[i];
    var zIdx = li.style.zIndex;
    // Use a class instead of id for captions
    var caption = li.querySelector('.caption');
    if (zIdx == 2) {
        caption.style.bottom = '300px';
    } else {
        caption.style.bottom = '0px';
    }
}

I'd also put css transitions in css (handy-dandy transitions):

.caption {
    transition: bottom 10s;
}

edited May 23 '17 at 12:22

Community

1
1

answered Sep 24 '15 at 19:50

Mr. Meeseeks

1,841
2
21
37

1

Good point about the matching id - that should be a class of id, and then it becomes valid and useful. If you have multiple elements with the same id and you select that id, the browser always finds the first one and stops looking. – Surreal Dreams Sep 24 '15 at 19:56
1

Thanks so much! Worked like a charm. I did know about the ID business, unfortunately all the information I was reading suggested using getElementById option and I couldn't find a class substitute. – Kristen Vogler Sep 24 '15 at 19:59

Targeting all li's instead of just the first

1 Answers1