Обход дерева DOM jquery

0

Довольно простой обход, который я не могу понять.

В основном, если кто-то нажимает на <li> и я хочу изменить изображение в первом div, как бы я это сделал? попробовал несколько вещей, в том числе:

$(this).closest('.currentImage img')

<div class="imageSlider">
    <div class="currentImage">
        <img src="LP5/lp5_1.png"/>
    </div>
    <ul class="thumbnails">
        <li><img src="LP5/lp5_1.png"/></li>
        <li><img src="LP5/lp5_2.png"/></li>
        <li><img src="LP5/lp5_3.png"/></li>
        <li><img src="LP5/lp5_4.png"/></li>
        <li><img src="LP5/lp5_5.png"/></li>
    </ul>
</div>

Jquery

$('.thumbnails li').click(function(e){
    e.preventDefault();
    var newImage = $(this).children('img').attr('src');
    var $image = $(this).closest('.currentImage img');
    $image.fadeOut(500, function() {
        $image.attr('src', newImage);
    }).fadeIn(500);
 });
  • 0
    $ (this) .parent (). prev (). children ('img') или просто ссылаются в переменной на обертку (image-slider), чтобы вы могли использовать ее в качестве корневого селектора.
Теги:

2 ответа

1
Лучший ответ

Fiddle

Попробуйте найти родительский элемент .imageSlider, а затем .currentImage его дочерний элемент .currentImage.

$('.thumbnails li').click(function(e){
    e.preventDefault();
    var newImage = $(this).children('img').attr('src');
    var $image = $(this).parents('.imageSlider').find('.currentImage img');
    console.log(newImage);
    $image.fadeOut(500, function() {
        $image.attr('src', newImage);
    }).fadeIn(500);
});

Другим вариантом будет $(this).parent('ul').siblings('.currentImage').find('img').

Поделиться
  • 0
    Да просто. ;) Так почему же, когда я сделал $(this).parent('.imageSlider.currentImage img') это не сработало?
  • 1
    Во-первых, вам нужен пробел между .imageSlider и .currentImage . Отсутствие пробела означает, что они являются одним и тем же элементом, то есть элементом с обоими классами. Во-вторых, $(this).parent(selector) находит непосредственного родителя элемента $(this) , но возвращает его, только если он соответствует селектору. Непосредственным родителем $(this) является элемент <ul> . В-третьих, $(this).parents(selector) начинается с непосредственного родителя, затем получает его родителя и повторяет его до тех пор, пока не найдет элемент, соответствующий селектору, что никогда не произойдет, потому что .currentImage не является родителем элемент <li> .
Показать ещё 2 комментария
0

Этот селектор не совсем прав. .currentImage является .currentImage элементом текущего родителя элемента (т.е. .thumbnails), поэтому closest() никогда не найдет его.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню