0

I have several divs with unique class 'slide_image', and unique id. Inside each divs I have 2 a links, "#next" and "#prev". what I'm trying to do is to get for each divs the id of the next and prev divs, and attribute the id ty links.

for example for .slide_image id=slide_3

<div id="slide_2" class="slide_image">
    1
    <a href="#slide_3" id="next"></a><a href="#slide_1" id="prev"></a>
</div>

<div id="slide_3" class="slide_image">
    1
    <a href="#slide_4" id="next"></a><a href="#slide_2" id="prev"></a>
</div>

here is what I've tried but its not working, I think I have a problem with my each() functions :

$('.slide_image').each(function(e){
    var next_link = $(this).next().attr('id');

$( "a#next" ).next().attr("href", next_link)
});

$('.slide_image').each(function(e){
    var prev_link = $(this).prev().attr('id');

$( "a#prev" ).prev().attr("href", prev_link)
});

here is a Jsfiddle with all my code : http://jsfiddle.net/4yzg25o2/1/

can anybody help me with this ?

thanks a lot,

Jonas
  • 121,568
  • 97
  • 310
  • 388
mmdwc
  • 1,095
  • 6
  • 27
  • 53
  • 1
    You cannot have multiple elements with the same id on the same page – tabz100 Jan 18 '15 at 14:26
  • they all have unique ID – mmdwc Jan 18 '15 at 14:30
  • What do you want to do with the next_ and prev_ links? The problem is your method is constantly overwriting the next_ and prev_ link vars. So it'll only ever find the last set of links. – dotty Jan 18 '15 at 14:31
  • You have 2 a tags with an id of prev in your html code – tabz100 Jan 18 '15 at 14:32
  • @dotty I want to set the href attribute to set the next or prev div id, just like in my example. I understand it overwrites, but I guess by using the each method it should be possible no ? – mmdwc Jan 18 '15 at 14:33
  • @tabz100, I've change ids for my links to class, .next & .prev, here is a new fiddle http://jsfiddle.net/4yzg25o2/4/ – mmdwc Jan 18 '15 at 14:39

1 Answers1

1

What I would do first is what people are suggesting. Change the #next and #prev to classes .next and .prev.

Then loop each .slide_image and find it's index (index will be the current .slide_image element inside it's parent. So the first .slide_image would be 1, the second 2, etc ). Then from here get the next and previous indexes (so 1 would be -1 and 2). We can then use jQuery's eq() to find an element by it's index. Once we have the element we can then get it's id by using attr().

Then simply add these ids to the .next and .prev links.

Take a look at http://jsfiddle.net/4yzg25o2/6/ which has a working example.

I didn't check error handling but eq() will return undefined if the element it's looking for doesn't exist (such as an element where it's index is -1). So you could use that to show other slides. Such as if we're on the first slide, should the .prev link to the last slide, or should we simply hide the link preventing them from clicking back?

One thing to note in my code is the use of this in $(".next", this). Basically the second attribute is the context, take a look at this SO post.

Community
  • 1
  • 1
dotty
  • 40,405
  • 66
  • 150
  • 195
  • thanks for your reply, but the id of my slides were only for the example... my slides will have text ids, like the name of the slide, not numbers, for example id="table", id="shelves", id="lamp"... so I can't not use and incremented method... do you see what I mean ? – mmdwc Jan 18 '15 at 14:54
  • thanks that's work perfectly ! just one more thing, is it possible for the last slide to have for the next link a return to the first div ? like you did for the first div previous, you go to the latst div... do you understand ? for the moment i have "#undefined". – mmdwc Jan 18 '15 at 15:21
  • I think $(".slide_images").length will return the amount of elements (so if there's 5 .slide_images, it's return 5. So using this I would check to see if next_index is 5, change it to 1. You can then do the reverse of this, if the prev_index is 0, make it 5. – dotty Jan 18 '15 at 15:24
  • http://jsfiddle.net/4yzg25o2/7/ don't forget the upvote and checking the answer as correct if it is ;) – dotty Jan 18 '15 at 15:26
  • thanks, but with your new code I have an error, whand on 1st slide and click previous, it's perfect, I get to the last div... but when on the last div and click to next, I'll get to the previous div... do you see why ? of course willl upvote ! – mmdwc Jan 18 '15 at 15:31
  • http://jsfiddle.net/4yzg25o2/8/ - Turns out eq() start's their indexes from 0 not 1. Which is why it was returning the second element, not the first :) – dotty Jan 18 '15 at 15:33
  • thanks, that's what I've tried but now when on slide_2 the previous won't work... check my fiddle with clickable next & prev links : http://jsfiddle.net/4yzg25o2/9/ – mmdwc Jan 18 '15 at 15:37
  • ok, I've found out why, had to delete if( prev_index == 0 ){ prev_index = total_slides; – mmdwc Jan 18 '15 at 15:38
  • Makes sense - from the docs - "Providing a negative number indicates a position starting from the end of the set, rather than the beginning.". so eq(-1) would find the last one anyway. – dotty Jan 18 '15 at 15:53