Не сколько блоков с одинаковым классом

@new-dev · Регистрация: 06.05.2014

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

Привет всем, как сделать нескольким блокам с одинаковым классом пример : чтобы display:block; был только первый блок всегда? остальные display:none;

HTML5
1
2
3
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>

Добавлено через 3 минуты
ещё такая задумка у меня далее сделать...

JavaScript
1
2
3
$(".submit_issue").click(function() { 
       //удалить первый блок и когда первый блок удаляется появился следущий тоесть первый
}

@Lazy_Den · 30.03.2015, 21:51

new-dev, если вы хорошо знакомы с CSS, то можете спокойно использовать практически все свойства, а так же псевдоклассы. Например, :nth-of-type, :first-child и т.д.

JavaScript
1
2
$('.content:nth-of-type(2)').css('display', 'none'); // скроем второй элемент
$('.content:first-child').css('display', 'none'); // скроем первый элемент

Кроме того, можно обращаться к элементам по их индексу (метод eq() или в качестве селектора :eq())

JavaScript
1
2
3
$('.content:eq(1)').css('display', 'none'); // скроем второй элемент
// или равнозначно
$('.content').eq(1).css('display', 'none'); // скроем второй элемент

Добавлено через 2 минуты
P.S. Есть и другие методы jQuery, но перечислять их все или способы для решения такой задачи - уйдёт много времени

@new-dev · 30.03.2015, 21:59 **[ТС]**

Lazy_Den, Ещё вопрос к вам имею )) Можно ли на JS провернуть такое :

Если имеется массив с несколькими числами с ID

как пример: 0 => 30, 1 => 31

и мне надо каждый элемент обработать в окошке по отдельности, 1 потом второй .. алгоритм примерно такой:

нажата кнопка резервировать с выбранными чекбоксами отправляем аякс с 1 ID получяем о нём данные, (они вставляются в модальное окно) заполняем поля в окне, нажимаем вторую кнопку выдать опять аякс на сервер получяем ответ...
по сути хотелось бы чтобы следовал второй круг цикла отправлялся второй ID но так не происходит он проходит не дожидаясь моих действий??

Как можно решить такую задачу? Я уже начал думать отправлять сразу весь массив с id, получаю неесколько продуктов и как-то с ними работать ? Но опять же очень не удобно как-то

@Lazy_Den · 30.03.2015, 22:05

new-dev, даже, если не брать во внимание то, что я уже вторые сутки не сплю, то всё равно, я бы не понял суть вашей задачи. Связь между массивами, чекбоксами, нажатыми кнопками и ajax-ом - хоть стреляйте, но не могу уловить.

@new-dev · 30.03.2015, 22:25 **[ТС]**

Lazy_Den,

Чего вы не спите?

1. Страница с чекбоксами на которой выберается не сколько
2. Нажимается кнопка номер 1
3. В JS после нажатия кнопки номер 1 извлекаются отмеченные чекбоксы с ID
4. Форматируем получаем строку типо 13, 15, 17 или можно формировать массив из этих чисел без разницы ( массив нужен если цикл делать в JS)
4. Далее отправляются эти ID аяксом на сервер от туда приходят данные соответсвующие этим номерам и подставляются в модальное окно
5. И далее в этом окне выбераем всякие параметры типо даты и.т.д и опять шлём аякс для добавления этого ID

Проблема в том что мне надо

1. Отправить один ID
2. Получить о нём данные отметить все поля в окошке
3. Отправить на добавление
4. Закрыть модальное это окно или как-то иначе ,
5. Получить данные о следущем ID

Добавлено через 2 минуты

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$("#give_book").click(function() {
            var books_id_to_give = [];
            var books_to_give = '';
            $('input:checked').each(function() {
                arr = $(this).attr('id').split('_');
                status = $(this).val();
                quantity = $("#quantity").val();
                if (arr[0] == 'b') {  
                    books_id_to_give.push(arr[1]);
                }  
            });
            
                $.ajax({
                    type: 'POST',
                    url: '/ajax/library/give_books',
                    data: { data : books_id_to_give },
                    success: function(data) {
                        $('.modal_form') 
                            .css('display', 'block') 
                            .animate({opacity: 1, top: '50%'}, 200); 
                        $('.modal_form').html(data);
 
                       
                    });
                        
                        var books_id_to_take = [];
                        $(".submit_issue").click(function() {
 
                            $('.modal_form')
                                .animate({opacity: 0, top: '45%'}, 200,  
                                    function(){
                                        $(this).css('display', 'none');  
                                    }
                                );
                        
                            if(quantity != '' && taken_till != '' && quantity > 0) {                            
                                books_id_to_take.push({TAKEN_TILL: taken_till, QUANTITY: quantity, BOOK_ID: books_id_to_give});
                            } 
                            if (valid = true && books_id_to_take.length > 0) {
                               
                                $.ajax({
                                    type: "POST",
                                    url: "/ajax/library/takebooks",
                                    data: {books_id: books_id_to_take, card_id: card_id
                                        },
                                    cache: false,
                                    success: function(data) {
                                        if(data === false){
                                            messageAlert('Error!');
                                        } else {
                                            messageAlert('OK');
                                        }
                                        setTimeout(function(){
                                            location.reload()
                                        }, 800)
                                    }
                                }); 
                                
                            }
                           
                        });
 
                    }
                });
                
            }
            else {
                return false;
            }
        });

Добавлено через 42 секунды
Я лишнее убрал чтоб глаз не мазолило, может по коду понятно что-то будет

Добавлено через 4 минуты
С одним ID всё ок , также вернуть могу сразу все продукты в окно например.. Но этот вариант не подходит. Надо по отдельности но за раз )

@Lazy_Den · 30.03.2015, 23:25

new-dev, так-с, вы хотите по очереди обработать каждое значение выбранного чекбокса? И только после редактирования текущего и сохранения его данных, приступать к следующему? Я правильно понял?

@new-dev · 31.03.2015, 06:42 **[ТС]**

Lazy_Den, Да именно так)

@Lazy_Den · 31.03.2015, 11:51

new-dev, сделал вам вот такой примерчик. Подчеркиваю, что это только пример, чтоб вам было проще понять последовательность действий.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var modal = $('#modal'),
    goBut = $('#go'),
    chbx = $(':checkbox');
/*
* по клику на кнопку, собираем в массив значения отмеченных
* чекбоксов и отправляем в функцию startProcessing
*/
goBut.on('click', function(){
    var $that = $(this);
    
    var vals = $(':checkbox:checked').map(function(i, el){
        return $(el).val();
    }).get();
 
    if(vals.length > 0) {
        startProcessing(vals);
        $that.hide();
        chbx.prop('disabled', true);
    } else {
        $that.show();
        chbx.prop('disabled', false);
        modal.text('Модальное окно для редактирования');
    }
});
/*
* Функция берет первый элемент массива и отправляет на сервер запрос
* Приходят данные для редактирования и выводятся в модальное окно
* Тут же снимаем галку с чекбокса, который редактировали
*/
function startProcessing(v){    
    $.ajax({
        url: '/echo/json/',
        type: 'POST',
        dataType: 'json',
        data: {json: v[0], delay: 1},
        success: function(data){
            var html = '<p>Приехали данные <b>' + data + '</b></p>';
            html += '<p>Поредактировали? Отправляем данные:</p>';
            html += '<button id="save">Сохранить</button>';
            modal.html(html);
            $(':checkbox[value=' + v[0] + ']').prop('checked', false);
        }
    });
}
/*
* Клик по кнопке в модальном окне - отправляем отредактированные данные
* на сервер, за что отвечает функция saveData
*/
modal.on('click', '#save', saveData);
 
/*
* После отправки отредактированных данных и в случае успеха,
* триггеруем событие на кнопку #go и процесс повторяется, 
* но уже без одного отмеченного чекбокса
*/
function saveData(){
    $.ajax({
        url: '/echo/html/',
        type: 'POST',
        beforeSend: function(){
            modal.html('');
        },
        dataType: 'html',
        data: {html: $('b',modal).prop('outerHTML'), delay: 1},
        success: function(data){
            $('#log').append('Сохранены данные ' + data + '<br>');
            goBut.trigger('click');
        }
    });
}

@new-dev · 31.03.2015, 12:50 **[ТС]**

Lazy_Den, Я уже чуть по другому накалякал) но ваш пример сохраню, и скорее всего под такой стиль перепишу))

Спасибо что не поленелись ответили, видно вы мастер =)

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@new-dev 6 / 6 / 1 Регистрация: 06.05.2014 Сообщений: 265
	30.03.2015, 21:59 [ТС]
	Lazy_Den, Ещё вопрос к вам имею )) Можно ли на JS провернуть такое : Если имеется массив с несколькими числами с ID как пример: 0 => 30, 1 => 31 и мне надо каждый элемент обработать в окошке по отдельности, 1 потом второй .. алгоритм примерно такой: нажата кнопка резервировать с выбранными чекбоксами отправляем аякс с 1 ID получяем о нём данные, (они вставляются в модальное окно) заполняем поля в окне, нажимаем вторую кнопку выдать опять аякс на сервер получяем ответ... по сути хотелось бы чтобы следовал второй круг цикла отправлялся второй ID но так не происходит он проходит не дожидаясь моих действий?? Как можно решить такую задачу? Я уже начал думать отправлять сразу весь массив с id, получаю неесколько продуктов и как-то с ними работать ? Но опять же очень не удобно как-то 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	30.03.2015, 22:05
	new-dev, даже, если не брать во внимание то, что я уже вторые сутки не сплю, то всё равно, я бы не понял суть вашей задачи. Связь между массивами, чекбоксами, нажатыми кнопками и ajax-ом - хоть стреляйте, но не могу уловить. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	30.03.2015, 23:25
	new-dev, так-с, вы хотите по очереди обработать каждое значение выбранного чекбокса? И только после редактирования текущего и сохранения его данных, приступать к следующему? Я правильно понял? 0

@new-dev 6 / 6 / 1 Регистрация: 06.05.2014 Сообщений: 265
	31.03.2015, 06:42 [ТС]
	Lazy_Den, Да именно так) 0

@new-dev 6 / 6 / 1 Регистрация: 06.05.2014 Сообщений: 265
	31.03.2015, 12:50 [ТС]
	Lazy_Den, Я уже чуть по другому накалякал) но ваш пример сохраню, и скорее всего под такой стиль перепишу)) Спасибо что не поленелись ответили, видно вы мастер =) 0

Не сколько блоков с одинаковым классом

Решение