Приём отбора элементов на основе .siblings()
Здравствуйте уважаемые форумчане!
К примеру, есть вот такой зоопарк: <ul> <li class="slonik"></li> <li class="begemotik"></li> <li class="begemotik"></li> <li class="begemotik"></li> <li class="slonik"></li> <li class="slonik"></li> <li class="slonik"></li> <li class="begemotik"></li> <li class="begemotik"></li> </ul> Как при клике на одного из li class="begemotik" получить всех, самых ближайших соседей? Т.е. не всех бегемотиков в списке, а только тех кто рядом с тем, на кого кликнули. p.s. Для тех кому "пояснить задачу подробнее", "объяснить зачем это нужно" или "просто оберни бегемотов в тег" скажу лишь что текущую DOM структуру менять нельзя, и задача именно такая, и реализовать её нужно именно так. |
Цитата:
Цитата:
<ul> <li class="slonik">1</li> <li class="begemotik">2</li> <li class="begemotik">3</li> <li class="begemotik">4</li> <li class="slonik">5</li> <li class="slonik">6</li> <li class="slonik">7</li> <li class="begemotik">8</li> <li class="begemotik">9</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('li.begemotik').click(function(){ $('li').css( "color", "black" ); $(this).next().css( "color", "red" ); $(this).prev().css( "color", "red" ); }); </script> Цитата:
<ul> <li class="slonik">1</li> <li class="begemotik">2</li> <li class="begemotik">3</li> <li class="begemotik">4</li> <li class="slonik">5</li> <li class="slonik">6</li> <li class="slonik">7</li> <li class="begemotik">8</li> <li class="begemotik">9</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('li.begemotik').click(function(){ $('li').css( "color", "black" ); $(this).next('.begemotik').css( "color", "red" ); $(this).prev('.begemotik').css( "color", "red" ); }); </script> |
Методы next() и prev() выбирают одного следующего/предыдущего соседа, пожалуйста прочтите первый пост внимательно.
На вашем примере, должно работать так: клик на 2 - выбираются 3 и 4 клик на 3 - выбираются 2 и 4 клик на 9 - выбирается 8 |
самых ближайших соседей на основе .siblings()
<ul> <li class="slonik">1</li> <li class="begemotik">2</li> <li class="begemotik">3</li> <li class="begemotik">4</li> <li class="slonik">5</li> <li class="slonik">6</li> <li class="slonik">7</li> <li class="begemotik">8</li> <li class="begemotik">9</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('li.begemotik').click(function(){ var i=$(this).index(); $('li').css( "color", "black" ); $(this).siblings().eq(i - 1).css( "color", "red" ); $(this).siblings().eq(i).css( "color", "red" ); }); </script> |
kvizor34,
Цитата:
Уточнять нельзя, но что такое самые ближайшие? Если, как работает siblings(), все дети родителя, то в чем вопрос? |
Цитата:
|
Цитата:
|
Решено, рекурсия
В итоге чтобы решить задачу, я написал две рекурсивных функции, одну для поиска себеподобных после, вторую до себя.
<ul> <li class="slonik"></li> <li class="begemotik"></li> <li class="begemotik"></li> <li class="begemotik"></li> <li class="slonik"></li> <li class="slonik"></li> <li class="slonik"></li> <li class="begemotik"></li> <li class="begemotik"></li> </ul> $('.begemotik').click(function(){ subrowsGroup = []; function findnext(row) { if(row.next().hasClass('begemotik')){ subrowsGroup.push(row.next()); findnext(row.next()); }else{ return false; } } function findprev(row) { if(row.prev().hasClass('begemotik')){ subrowsGroup.push(row.prev()); findprev(row.prev()); }else{ return false; } } findnext($(this)); findprev($(this)); console.log(subrowsGroup); }) Если у кого то появятся другие предложения, пишите, думаю эта тема может быть полезной. |
Кажется я понял (но не уверен :) ):
<ul> <li class="slonik">1</li> <li class="begemotik">2</li> <li class="begemotik">3</li> <li class="begemotik">4</li> <li class="slonik">5</li> <li class="slonik">6</li> <li class="slonik">7</li> <li class="begemotik">8</li> <li class="begemotik">9</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('li').click(function(){ $('li').css( "color", "black" ); var $this = $(this); var cls = $this.attr('class'); $this.nextUntil(':not(.' + cls + ')').css( "color", "red" ); $this.prevUntil(':not(.' + cls + ')').css( "color", "red" ); }); </script> |
Аналогичный принцип - другая реализация
<ul> <li class="slonik">1</li> <li class="begemotik">2</li> <li class="begemotik">3</li> <li class="begemotik">4</li> <li class="slonik">5</li> <li class="slonik">6</li> <li class="slonik">7</li> <li class="begemotik">8</li> <li class="begemotik">9</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('li.begemotik').click(function(){ $('li').css( "color", "black" ); var sb = $(this).prev('li.begemotik'); while (sb.index() >= 0){ sb.css( "color", "red" ); sb = sb.prev('li.begemotik'); } sb = $(this).next('li.begemotik'); while (sb.index() >= 0){ sb.css( "color", "red" ); sb = sb.next('li.begemotik'); } }); </script> |
Часовой пояс GMT +3, время: 03:11. |