Suppose I have this html structure:

<div class="block_right"> <h1>block 1</h1> <div class="object_div"> <p>title 3</p> <div><a class="play" id="p3">play</a></div> </div> <div class="object_div"> <p>title 2</p> <div><a class="play" id="p2">play</a></div> </div> <div class="object_div"> <p>title 8</p> <div><a class="play" id="p8">play</a></div> </div> <div class="object_div"> <p>title 12</p> <div><a class="play" id="p12">play</a></div> </div> </div>

I need using jquery , having clicked on one of the play buttons, to find the next and previous play button. You also need to select the next element from exactly this block class="block_right" , and on the page there can be a similar block like class="block_left" and other objects, which can randomly coincide with the current block. Of course, you cannot choose from it, only from the current one

next() does not fit, since, as you can see, the play buttons are not consecutive. You can of course find the parent div , which in my example has class="object_div" then find its next neighbor, and then look for this next neighbor with a child of the play class. But this solution is not convenient, because creates a dependence of js on the layout structure of the excess, and it can change.

I think the solution may be to select all the elements with the play class child for block_right and from them choose the element next for the current one. How to do this right?

  • Write all the values ​​in JS. In any case, the script will depend on the markup, since You start the function with "markup" - Yuri

2 answers 2

It gets an id from each play, you can rewrite it as you need

 $(document).ready(function(){ var i =0; var prev = 0; var next = 0; $(".play").on("click", function(){ var res = $(".block_right").find(".play") i = res.index(this); if(i > res.length-1) { i=0; } prev = i - 1; next = i + 1; if(next == 5) { next=0; } if(prev == -1) { prev=0 } console.log("previus: " + res[prev].id) console.log("current: " + res[i].id); console.log("next: " + res[next].id) console.log(i); i++; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block_right"> <h1>block 1</h1> <div class="object_div"> <p>title 3</p> <div><a class="play" id="p3">play</a></div> </div> <div class="object_div"> <p>title 2</p> <div><a class="play" id="p2">play</a></div> </div> <div class="object_div"> <p>title 8</p> <div><a class="play" id="p8">play</a></div> </div> <div class="object_div"> <p>title 12</p> <div><a class="play" id="p12">play</a></div> </div> </div>

  • I need to click exactly on one of the play. In practice, this is a player. And find the next id exactly as to which play was clicked. As I understand it, you mean that every next click on the test button imitates the transition to the next element? - htclog81
  • Rather, I need to get not an id from play, but to get a sequence number, which you have i just pressed the element. And then adding a unit to it to get the ordinal number of the next element or removing the unit to get the ordinal number of the current element. Well, then get from the array itself this next / previous element. Apparently, this is sorting out all the elements with the play class in the loop and finding the current id can be done in them ... Although perhaps there is a simpler solution ... - htclog81
  • I understand you now think about how to do - L. Vadim
  • And if they click on the first play, who's the translator? - L. Vadim
  • If you click on the first, then the previous one is not defined. If the last, then the next is not defined, the variable is empty. No need to loop. The back / forward arrow is simply not active in these cases. - htclog81

Found such a solution

  $(document).ready(function(){ $(".play").on("click", function(){ var block_els = $(".block_right").find(".play"); var index = block_els.index( this ); var prev_index = index - 1; var next_index = index + 1; console.log(index, prev_index, next_index); if (prev_index == -1) { console.log("not prev_element"); var prev_el = ''; } else { var prev_el = block_els[prev_index]; } if (next_index > block_els.length-1) { console.log("not_next_element"); var next_el = ''; } else { var next_el = block_els[next_index]; } console.log("prev_el", prev_el, "next_el", next_el); }); });

select all .play in the block. Then we find the index in the given collection of the current element, using index (this), then select the previous and next element by the index from the collection.