Обработка множества элементов одним скриптом
Здравствуйте,
помогите понять как 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 скриптом? |
Цитата:
$('#pic') nalezhitiy, ИД у элементов должен бытьуникальным в пределах страницы. Утебя же он повторён 3 раза. |
Тогда нужно записать типа вот так:
<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 и с ними работать? |
Цитата:
Так же у тебя есть дубляж еще одного идентификатора - masseg. Это неприемлемо по тем же причинам... |
Вот нашёл решение для сбора массива 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> Теперь думаю как использовать эти данные. если кто поможет спасибо |
$(ids).each(function () { $('#' + this).чтототам(); }); $('#' + this) т е это обращение к элементу |
Matre,
большое спасибо |
Насколько я знаю множественное использование id не правильный подход к написанию любой страницы так как id обязан быть уникальным.
используйте class и будет вам счастье:) |
розовый слоник
у тс id разные pic1,pic2,pic3 см #5 |
Часовой пояс GMT +3, время: 05:16. |