31.07.2018, 13:27
|
|
Аспирант
|
|
Регистрация: 08.02.2018
Сообщений: 50
|
|
Приём отбора элементов на основе .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 структуру менять нельзя, и задача именно такая, и реализовать её нужно именно так.
Последний раз редактировалось kvizor34, 31.07.2018 в 14:33.
|
|
31.07.2018, 14:02
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Сообщение от 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>
|
|
31.07.2018, 14:23
|
|
Аспирант
|
|
Регистрация: 08.02.2018
Сообщений: 50
|
|
Методы next() и prev() выбирают одного следующего/предыдущего соседа, пожалуйста прочтите первый пост внимательно.
На вашем примере, должно работать так:
клик на 2 - выбираются 3 и 4
клик на 3 - выбираются 2 и 4
клик на 9 - выбирается 8
Последний раз редактировалось kvizor34, 31.07.2018 в 14:27.
|
|
31.07.2018, 14:23
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
самых ближайших соседей на основе .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>
|
|
31.07.2018, 14:25
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
kvizor34,
Сообщение от kvizor34
|
пожалуйста прочтите условие внимательно
|
У вас условия очень расплывчатые.
Уточнять нельзя, но что такое самые ближайшие? Если, как работает siblings(), все дети родителя, то в чем вопрос?
|
|
31.07.2018, 14:29
|
|
Аспирант
|
|
Регистрация: 08.02.2018
Сообщений: 50
|
|
Сообщение от Dilettante_Pro
|
kvizor34,
У вас условия очень расплывчатые.
Уточнять нельзя, но что такое самые ближайшие? Если, как работает siblings(), все дети родителя, то в чем вопрос?
|
самые ближайшие - все, что идут подряд
|
|
31.07.2018, 14:31
|
|
Аспирант
|
|
Регистрация: 08.02.2018
Сообщений: 50
|
|
Сообщение от kvizor34
|
Т.е. не всех бегемотиков в списке, а только тех кто рядом с тем на кого кликнули
|
Неужели я так сложно объяснил?
|
|
31.07.2018, 15:07
|
|
Аспирант
|
|
Регистрация: 08.02.2018
Сообщений: 50
|
|
Решено, рекурсия
В итоге чтобы решить задачу, я написал две рекурсивных функции, одну для поиска себеподобных после, вторую до себя.
<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);
})
Если у кого то появятся другие предложения, пишите, думаю эта тема может быть полезной.
Последний раз редактировалось kvizor34, 31.07.2018 в 15:12.
|
|
31.07.2018, 15:15
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,585
|
|
Кажется я понял (но не уверен ):
<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>
__________________
29375, 35
|
|
31.07.2018, 15:18
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Аналогичный принцип - другая реализация
<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>
Последний раз редактировалось Dilettante_Pro, 31.07.2018 в 15:20.
|
|
|
|