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 that you have read and understand our privacy policy and code of conduct.

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