Jquery select previous element with class

Question

I have 3 elements:

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

on click on target div I test .prev() function in my js

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

Output is like: 'Second undefined', but should be like: 'second first' if I understand right the parameter of .prev() usage. How can I get first previous element with certain class then? Here is fiddle for you: http://jsfiddle.net/0fzgzce5/

Answer 1

From jQuery docs,

.prev()

Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

To select all preceding sibling elements, rather than just the preceding adjacent sibling, use the .prevAll() method.

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

So you should use console.log($(this).prevAll('.first').html());

Answer 2

You can make use of sibling() which will return the element with specific class and at same level as calling elment. But make sure that there is no same div after target

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

DEMO

OR you can use prevAll()

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

DEMO

Answer 3

Use prevAll() instead of 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 4

You can use also $("div:eq(3)") to get the exact element. Best example is $("ul li:eq(3)")

Answer 5

In your second console.log() , yous this is still .target and it does not have .first class so it is saying undefined .

To get the first dive, do:

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

Answer 6

Jquery .prev() always get immediate preceding sibling.

if you pass a selector as parameter it will filter the preceding element to match with, if it did not match it will return undefined, in your case this is happening

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

is same as

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

which will return "Second"

If you pass any selector other than '.second' it alway return undefined so, your case

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

is as exprected, returning undefined because '.first' is not matching with preceding element selector.

Update: if you want to get First the use

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