Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Приём отбора элементов на основе .siblings() (https://javascript.ru/forum/events/74682-prijom-otbora-ehlementov-na-osnove-siblings.html)

kvizor34 31.07.2018 13:27

Приём отбора элементов на основе .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 структуру менять нельзя, и задача именно такая, и реализовать её нужно именно так.

Dilettante_Pro 31.07.2018 14:02

Цитата:

Сообщение от kvizor34
текущую DOM структуру менять нельзя

Цифры - только для наглядности, на процесс не влияют
Цитата:

Сообщение от kvizor34
Как при клике на одного из li class="begemotik" получить всех, самых ближайших соседей?

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


Цитата:

Сообщение от kvizor34
пояснить задачу подробнее

Или только бегемотиков?
<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>

kvizor34 31.07.2018 14:23

Методы next() и prev() выбирают одного следующего/предыдущего соседа, пожалуйста прочтите первый пост внимательно.
На вашем примере, должно работать так:
клик на 2 - выбираются 3 и 4
клик на 3 - выбираются 2 и 4
клик на 9 - выбирается 8

Dilettante_Pro 31.07.2018 14:23

самых ближайших соседей на основе .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>

Dilettante_Pro 31.07.2018 14:25

kvizor34,
Цитата:

Сообщение от kvizor34
пожалуйста прочтите условие внимательно

У вас условия очень расплывчатые.
Уточнять нельзя, но что такое самые ближайшие? Если, как работает siblings(), все дети родителя, то в чем вопрос?

kvizor34 31.07.2018 14:29

Цитата:

Сообщение от Dilettante_Pro (Сообщение 491387)
kvizor34,
У вас условия очень расплывчатые.
Уточнять нельзя, но что такое самые ближайшие? Если, как работает siblings(), все дети родителя, то в чем вопрос?

самые ближайшие - все, что идут подряд

kvizor34 31.07.2018 14:31

Цитата:

Сообщение от kvizor34 (Сообщение 491380)
Т.е. не всех бегемотиков в списке, а только тех кто рядом с тем на кого кликнули

Неужели я так сложно объяснил?

kvizor34 31.07.2018 15:07

Решено, рекурсия
 
В итоге чтобы решить задачу, я написал две рекурсивных функции, одну для поиска себеподобных после, вторую до себя.
<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);
})


Если у кого то появятся другие предложения, пишите, думаю эта тема может быть полезной.

Aetae 31.07.2018 15:15

Кажется я понял (но не уверен :) ):
<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>

Dilettante_Pro 31.07.2018 15:18

Аналогичный принцип - другая реализация
<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, время: 15:40.