jQuery. Выбрать все элементы кроме текущего (this)


Иногда при разработке стоит задача выбрать все элементы одного стиля или типа, кроме одного выбранного или выделенного.

Например, у нас есть несколько картинок с одинаковым классом.

<img class="myimg" alt=" " src="1.png" width="95" height="95"/>
<img class="myimg" alt=" " src="2.png" width="95" height="95"/>
<img class="myimg" alt=" " src="3.png" width="95" height="95"/>
<img class="myimg" alt=" " src="4.png" width="95" height="95"/>

При наведении мышки на одну из этих картинок она должна, немного, увеличится, а остальные уменьшиться.

Для решения этой задачки в jQuery можно написать следующее:

var imgid;
$(".myimg").mouseenter(function(){
imgid = this.id;
$(".myimg").each(function(){
if(this.id==imgid) $(this).stop(false,true).animate({width: "100px",height: '100px'}, 300 );
else $(this).stop(false,true).animate({width: "90px",height: '90px'}, 300 );
});
});

В результате, при наведении мышки на картинку, мы сохраняем ее id во временную переменную и затем циклом проходим по всем картинкам с классом myimg. Если текущий id картинки в цикле равен id который во временной переменной то увеличиваем размеры картинки, иначе – уменьшаем.

, ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 10, в среднем: 4.70 из 5)
Loading ... Loading ...


  1. #1 Георгий - Апрель 12th, 2011 at 21:03

    Никогда не думал что это пригодится! Спасибо за удобный скрипт, вот только примерчик бы какой то…

  2. #2 aasd - Май 12th, 2011 at 15:42

    Вы сами хоть пробовали енто все запускать??? По моему нет

  3. #3 опухоль - Июль 8th, 2011 at 19:46

    Всё вышло. Спасибо за пост.

  4. #4 лечить-вылечить - Август 25th, 2011 at 18:34

    Очень пригодилось. Спасибо!

  5. #5 takeshy - Сентябрь 29th, 2011 at 23:04

    спс)))отлично)))

  6. #6 Слот - Октябрь 18th, 2011 at 16:53

    Большое спасибо!

  7. #7 Mapuo - Март 6th, 2012 at 07:38

    А как насчет простой фильтрации? Без дополнительных функций.

    $(“.class”).not(this)

    получились все элементы класса class, кроме текущего.

  8. #8 ALL - Май 3rd, 2012 at 22:58

    Не работает так как id в примере не указан. Переделал на src:
    var imgid;
    $(“.myimg”).mouseenter(function(){
    imgid = this.src;
    $(“.myimg”).each(function(){
    if(this.src==imgid) $(this).stop(false,true).animate({width: “100px”,height: ’100px’}, 300 );
    else $(this).stop(false,true).animate({width: “90px”,height: ’90px’}, 300 );
    });
    });

  9. #9 Mapuo - Август 1st, 2012 at 09:49

    #8 все работает. id тут не причем.
    $(«.class»).not(this) – в твоем случае это $(“.myimg”).not(this) – то есть, все картинки кроме текущей.

  10. #10 Preston - Сентябрь 11th, 2012 at 15:06

    not(this) нагляднее и проще по-моему. Вот пример

    var allLinks = $(“a”);
    allLinks.click(function() {
    allLinks.not(this).css(“color”, “red”);
    });

    Взято отсюда http://jquerylist.ru/snippets/exclude-this-from-selector.html

    P.S. Тупанул, выше уже отписались по поводу not(this)

  11. #11 Дмитрий Новенький - Май 3rd, 2014 at 11:21

    Спасибо, очень помогло!

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.