Найти следующий и предыдущий элемент на странице из группы элементов

515

26 января 2017, 03:52

Допустим, у меня есть такая структура html:

<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>

Мне нужно с помощью jquery, имея клик по одной из кнопок play, найти следующую и предыдущую кнопку play. Также нужно, что бы выбрался следующий элемент именно из данного блока class="block_right", а на страницы может быть еще подобный в точности блок например class="block_left" и других объектов, в котором случайным образом могут и совпадать с текущим блоком. Из него выбрать нельзя конечно, только из текущего.

next() не подходит, так как, как видите кнопки play идут не подряд. Можно конечно найти родительский div, который в моем примере имеет class="object_div" далее найти его следующего соседа, а далее искать у этого следующего соседа дочерний элемент с классом play. Но это решение не удобное, т.к. создает зависимость js от структуры верстки избыточную, а она может меняться.

Я думаю решением может быть, выбрать все элементы с классом play дочерние для block_right и из них выбрать элемент следующий для текущего. Как это верно сделать?

Answer 1

Достает id у каждого play, можно переписать под себя как нужно

$(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>

Answer 2

Нашел такое решение

    $(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);
        });
    });

выбираем все .play в блоке. Затем находим index в данной коллекции текущего элемента, с помощью index(this), затем выбираем по индексу из коллекции предыдущий и следующий элемент.