1

Допустим, у меня есть такая структура 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 и из них выбрать элемент следующий для текущего. Как это верно сделать?

1
  • Записывай все значения в JS. В лбов случае, скрипт будет от разметки зависеть, т.к. ты функцию с "разметки" запускаешь
    – Yuri
    24 янв 2017 в 14:13

2 ответа 2

2

Достает 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>

11
  • Мне нужен клик именно по одному из play. На практике это плейер. И находить следующий id именно относительно того по какому play кликнули. Как я понял, Вы имеете ввиду, что каждый следующий клик по кнопку test имитируют переход к следующему элементу?
    – htclog81
    24 янв 2017 в 14:52
  • Скорее мне нужно получить не id у play, а получить порядковый номер, который у Вас i именно нажатого элемента. А далее добавив к нему единичку получить порядковый номер следующего элемента или убрав единичку получить порядковый номер текущего элемента. Ну а далее получить из массива сам этот следующий/предыдущий элемент. Видимо это как то перебирая в цикле все элементы с классом play и находя в них текущий по id можно сделать... Хотя возможно есть более простое решение...
    – htclog81
    24 янв 2017 в 15:01
  • я вас понял сейчас подумаю как сделать
    – L. Vadim
    24 янв 2017 в 15:06
  • а если кликают на первый плей кто преведущий?
    – L. Vadim
    24 янв 2017 в 15:13
  • Если кликают на первый, то предыдущий не определен. Если на последний, то следующий не определен, переменная пуста. Зацикливать не нужно. Стрелка назад/вперед в этих случаях просто не активна.
    – htclog81
    24 янв 2017 в 15:23
0

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

    $(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), затем выбираем по индексу из коллекции предыдущий и следующий элемент.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.