jQuery: выбор родственного элемента

<div id="item">
    <div class="action">
        Oh! Look, a squashed pea!
    </div>
    <img class="picture" src="example">
</div>

Используя jQuery, при наведении курсора на изображение мне нужен DIV с именем класса «действие». Парящая часть у меня есть, и она работает нормально, но я борюсь с частью селектора.

Я попытался выбрать родителя, а затем родного брата с классом «действие», но безуспешно...

EDIT: больше информации, которую я должен был добавить, но неуклюже не пытался облегчить чтение - мой плохой.

<div id="item"> 
    <div class="action"> 
        <span>Oh! Look, a squashed pea!</span>
        <button id="add">Hello</button>
    </div> 
    <img class="picture" src="example"> 
</div>

Я все еще ищу ссылку на DIV с примененным классом .action БЕЗ ссылки на какие-либо идентификаторы.


jquery dom jquery-selectors siblings
person Alex Guerin    schedule 26.02.2012    source источник
comment
.action не является братом родителя изображения, это никогда не сработает. В общем, посмотрите документацию по jQuery: api.jquery.com/category/traversing   -  person Felix Kling    schedule 27.02.2012
comment
возможный дубликат Как выбрать родственный элемент с помощью jQuery?< /а>   -  person Felix Kling    schedule 27.02.2012

Ответы (2)


arrow_upward
0
arrow_downward 

$("#item img")
    .on("mouseover", function(){
    var prevAction = $(this).prev();
    prevAction
        .css("background-color","red");
});

Мы используем prev() для выбора непосредственно предшествующего элемента. (Затем мы устанавливаем красный цвет фона, но это та часть, которую вы меняете). В этом случае элемент, который вы хотите выбрать, сохраняется в переменной prevAction.

EDIT: Для вашего обновления:

$("img.picture")
    .on("mouseover", function(){
    var prevAction = $(this).prev();
    prevAction
        .css("background-color","red");
});

Вместо того, чтобы выбирать изображение внутри div с идентификатором item, мы выбираем изображение с классом picture. Это может конфликтовать с другими элементами, если у вас есть изображения того же класса за пределами этих #item div. В этом случае вы могли бы вероятно сделать селектор более конкретным:

$("div img.picture")

Это выберет изображения с классом picture внутри любого элемента div (независимо от идентификатора или класса).

person Purag    schedule 26.02.2012
comment
Спасибо, как мне поступить с внесенными изменениями? - person Alex Guerin; 27.02.2012

arrow_upward
0
arrow_downward

Вы можете использовать .prev(), чтобы получить предыдущий родственный элемент. В вашей функции наведения это будет:

$(this).prev();
person Christofer Eliasson    schedule 26.02.2012