Поиск элемента в массиве

@Kiruxa · Регистрация: 31.01.2011

Студворк — интернет-сервис помощи студентам

Всем привет! Подскажите как из массива элементов выловить искомый элемент?
На страницу выгружается слайдер с произвольно выбранным активным элементом.
Задача в том чтобы при клике на кнопки prev/next отловить этот активный элемент, снять с него класс активности и передать следующему/предыдущему элементу в слайдере.

Делаю так:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="next" onclick="hasnextblocks();"></div>
<div class="prev" onclick="hasprevblocks();"></div>
 
<ul>
<li class="block_0"><a href="#">Первый элемент</a></li>
<li class="block_1"><a href="#" class="active">Второй элемент</a></li>
<li class="block_2"><a href="#">Третий элемент</a></li>
<li class="block_3"><a href="#">Четвертый элемент</a></li>v
<li class="block_4"><a href="#">Пятый элемент</a></li>
</ul>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function hasnextblocks(){
    
        var tab = $('ul li');
        var tablength = tab.length;
        
        tab.each(function(i){
        
            var tabactive = $('.block_'+i).find('.active').removeClass('active');
            
            var tabserch = jQuery.grep(tabactive, function(){
                return true;
            });
            
            var tabresult = tabserch.next().addClass('active');
            
        });
        
    }

В переменную tabactive функция отдала массив элементов вместе с искомым элементом (все норм), а вот в tabserch пытаюсь методом grep получить найденный элемент отдельно от массива(чтобы от него найти следующий элемент) - не получается.. Что не так делаю?

@Lazy_Den · 24.02.2014, 19:47

Я не знаю, как ваш слайдер работает, но что-то вы перемудрили. Как я понимаю, у вас может быть только один элемент с классом "block_N". Поэтому применять метод grep(), тут явно не нужно, а тем более, что используете вы его не правильно. Да и цикл тут ни к чему.

JavaScript
1
2
var tabactive = $('ul').find('.active'); // уже содержит активный элемент.
tabactive.parent('li').next('li').find('a'); // следующий элемент <a>, на который нужно повесить класс

А для упрощения, я бы вешал класс active на <li>

@Kiruxa · 24.02.2014, 22:18 **[ТС]**

Дело в том что я хочу сделать так чтобы активность могла переключаться с последнего элемента на первый. Для этого мне нужно отлавливать индекс элемента (поэтому все так нагромождено). А я элемент из массива выдернуть не могу - какой уж там индекс ...

Ну ок, буду гуглить дальше..

@Lazy_Den · 24.02.2014, 22:23

Сообщение от Kiruxa

Ну ок, буду гуглить дальше

Вы бы примерчик сделали на jsfiddle.net, тогда бы и разумное решение найти можно было. А поверхностный осмотр "пациента", показывает, что для таких целей, как вы описали, не нужны ни массивы, ни индексы

@Kiruxa · 24.02.2014, 22:56 **[ТС]**

Вот примерчик http://jsfiddle.net/U6bjK/24/ .

@Lazy_Den · 25.02.2014, 01:30

Сообщение от Kiruxa

Вот примерчик

Вот так пойдет?

Добавлено через 1 час 54 минуты
P.S. А вот так, можно зациклить слайдер. Тут я оставил ваш принцип - различные функции, для событий на разных кнопках. Я бы тут этот код не выкладывал, но правила требуют.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var bigBlock = $('.big_block'),
    li = $('ul li',bigBlock)
    liCnt = li.length;
function hasnextblocks(){
    var tabactive = bigBlock.find('.active').removeClass('active'),
        nextLi = tabactive.next('li');
    if(nextLi.index('li[class^=block_]') < 0){
        li.eq(0).addClass('active');
    } else {
        nextLi.addClass('active');
    }
}
function hasprevblocks(){
    var tabactive = bigBlock.find('.active').removeClass('active'),
        prevLi = tabactive.prev('li');
    console.log(prevLi.index('li[class^=block_]'));
    if(prevLi.index('li[class^=block_]') < 0){
        li.eq(liCnt - 1).addClass('active');
    } else {
        prevLi.addClass('active');
    }
}
$('.next').on('click', hasnextblocks);
$('.prev').on('click', hasprevblocks);

Но можно это дело запаковать в одну функцию. Тогда получим такой вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var bigBlock = $('.big_block'),
    li = $('ul li',bigBlock),
    liCnt = li.length;
function changeBlocks(){
    var options = {
        next: {
            method: 'next',
            stepTo: 0
        },
        prev: {
            method: 'prev',
            stepTo: liCnt - 1             
        }
    };
    var param = options[$(this).attr('class')],
        tabactive = bigBlock.find('.active').removeClass('active'),
        arriving = tabactive[param.method]('li');
    if(arriving.index('li[class^=block_]') < 0){
        li.eq(param.stepTo).addClass('active');
    } else {
        arriving.addClass('active');
    }
}
$('.next, .prev').on('click', changeBlocks);

@Kiruxa · 25.02.2014, 11:13 **[ТС]**

Lazy_Den, Да, вот это как раз то что нужно. Спасибо

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	24.02.2014, 22:18 [ТС]
	Дело в том что я хочу сделать так чтобы активность могла переключаться с последнего элемента на первый. Для этого мне нужно отлавливать индекс элемента (поэтому все так нагромождено). А я элемент из массива выдернуть не могу - какой уж там индекс ... Ну ок, буду гуглить дальше.. 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	24.02.2014, 22:56 [ТС]
	Вот примерчик http://jsfiddle.net/U6bjK/24/ . 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	25.02.2014, 11:13 [ТС]
	Lazy_Den, Да, вот это как раз то что нужно. Спасибо 0

Поиск элемента в массиве

Решение