Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Обработка множества элементов одним скриптом (https://javascript.ru/forum/dom-window/14458-obrabotka-mnozhestva-ehlementov-odnim-skriptom.html)

nalezhitiy 17.01.2011 19:15

Обработка множества элементов одним скриптом
 
Здравствуйте,
помогите понять как jquery работает с множеством элементов?
Как он определяет идентификатор обрабатываемого элемента.
Вот пример: есть

<div id="pic"><img src=" images/1.gif"><div id="masseg" style="display:none;">Описание русунка 1</div></div>
<div id="pic"><img src=" images/2.gif"><div id="masseg" style="display:none;">Описание русунка 2</div></div>
<div id="pic"><img src=" images/3.gif"><div id="masseg" style="display:none;">Описание русунка 3</div></div>

Ну вот использую такой jquery
$(document).ready(function() {
     $('#pic').hover(function(){  // добираемся до элемента по которому будем кликать
     $(this).find('#masseg').animate({'opacity': '1'},500).css({'display':'block'}); // а теперь аккуратно выводим наш блок
         },
		 function(){ // убираем блок
         $(this).find('#masseg').animate({'opacity':'0'},500).css({'display':'none'});
     });

 });


Пример работает только c первым блоком(images/1.gif) работает замечательно, но когда навожу мыш на другие блоки, результата никого(((
Объясните, как обрабатывать большое количество блоков одним jquery скриптом?

ksa 17.01.2011 21:59

Цитата:

Сообщение от nalezhitiy
Пример работает только c первым блоком

Потому как там явно указан ИД элемента

$('#pic')


nalezhitiy, ИД у элементов должен бытьуникальным в пределах страницы. Утебя же он повторён 3 раза.

nalezhitiy 18.01.2011 12:11

Тогда нужно записать типа вот так:
<div id="pic1"><img src=" images/1.gif"><div id="masseg" style="display:none;">Описание русунка 1</div></div>
<div id="pic2"><img src=" images/2.gif"><div id="masseg" style="display:none;">Описание русунка 2</div></div>
<div id="pic3"><img src=" images/3.gif"><div id="masseg" style="display:none;">Описание русунка 3</div></div>


А в jquery указать список этих
id($('#pic1','#pic2'...))
?
Или просто пересоздать структуру моего кода, или как получить масив всех id и с ними работать?

ksa 18.01.2011 16:35

Цитата:

Сообщение от nalezhitiy
А в jquery ...

Я с jquery не работаю...

Так же у тебя есть дубляж еще одного идентификатора - masseg. Это неприемлемо по тем же причинам...

nalezhitiy 18.01.2011 16:43

Вот нашёл решение для сбора массива id
var ids = [] ;    
      $('#gallery') 
    	    .find('div[id*="pic"]')   //сбор всех id  слоя где есть "pic"
            .each(function() { 
           ids.push(this.id); // заганяем значение id в переменую ids
        }) ;

<div id="gallery">
<div id="pic1"><img src=" images/1.gif"><div id="masseg1" style="display:none;">Описание рисунка 1</div></div>
<div id="pic2"><img src=" images/2.gif"><div id="masseg2" style="display:none;">Описание рисунка 2</div></div>
<div id="pic3"><img src=" images/3.gif"><div id="masseg3" style="display:none;">Описание рисунка 3</div></div>
</div>

Теперь думаю как использовать эти данные.
если кто поможет спасибо

Matre 18.01.2011 17:14

$(ids).each(function () {
$('#' + this).чтототам();
});


$('#' + this) т е это обращение к элементу

nalezhitiy 18.01.2011 17:33

Matre,
большое спасибо

розовый слоник 19.01.2011 19:42

Насколько я знаю множественное использование id не правильный подход к написанию любой страницы так как id обязан быть уникальным.
используйте class и будет вам счастье:)

Matre 19.01.2011 20:10

розовый слоник

у тс id разные
pic1,pic2,pic3
см #5


Часовой пояс GMT +3, время: 05:16.