Jquery выбрать предыдущий элемент с классом

Question

У меня есть 3 элемента:

<div class='first'>First</div> 
<div class='second'>Second</div> 
<div class='target'>Target</div> 

по щелчку на targetdiv я испытываю .prev() функцию в моем JS

$(document).on('click','.target',function(){ 
    console.log($(this).prev().html()); 
    console.log($(this).prev('.first').html()); 
}); 

Выхода, как: 'Второй неопределенный', но должен выглядеть следующим образом: «второй во-первых», если я правильно понимаю параметр использования .prev(). Как я могу получить первый предыдущий элемент с определенным классом? Здесь вы найдете скрипку: http://jsfiddle.net/0fzgzce5/

Answer 1

С Jquery Docs,

.prev()

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

Чтобы выбрать все предыдущие элементы родственного брата, а не только , предшествующие соседнему брату, используйте метод .prevAll().

http://api.jquery.com/prevAll/

Таким образом, вы должны использовать

Answer 2

Вы можете использовать sibling(), который вернет элемент с определенным классом и на том же уровне, что и вызывающий elment. Но убедитесь, что нет же ДИВ после target

$(document).on('click','.target',function(){ 
    console.log($(this).siblings('.second').html()); 
    console.log($(this).siblings('.first').html()); 
}); 

DEMO

ИЛИ вы можете использовать prevAll()

$(document).on('click','.target',function(){ 
     console.log($(this).prevAll('.second').html()); 
     console.log($(this).prevAll('.first').html()); 
    }); 

DEMO

Answer 3

В вашей второй console.log(), yous this по-прежнему .target и не имеет .first класс, так сказать undefined.

Чтобы получить первое погружение, сделайте следующее:

console.log($(this).prev().prev().html()); 

Answer 4

Использование prevAll() вместо prev()

$(document).on('click', '.target', function() { 
 
    alert($(this).prevAll('.second').html()); 
 
    alert($(this).prevAll('.first').html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='first'>First</div> 
 
<div class='second'>Second</div> 
 
<div class='target'>Target</div>

Answer 5

Jquery .prev() всегда получают непосредственный предшествующий брат.

, если передать селектор в качестве параметра будет фильтровать предыдущий элемент в соответствии с, если он не соответствует он будет возвращать неопределенным, в вашем случае это происходит

$('.target').prev().html() 

такой же, как

$('.target').prev('.second').html(); 

который будет возвращать «Второй»

Если вы передаете любой селектор, кроме «.second» она всегда возвращать неопределенное так, ваше дело

$('.target').prev('.first').html(); 

такой же исправный, возвращающий неопределенный, потому что «.first» не соответствует предыдущему элементу селектора.

Update: , если вы хотите, чтобы получить первый ЕГЭ

$('.target').prev().prev().html();