CODEWITHSUNDEEP
javascriptjquery
Sergey Scopin
Sergey Scopin

Reputation: 2245

Jquery select previous element with class

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/

Upvotes: 2

Views: 5788

Answers (6)

Sankha
Sankha

Reputation: 31

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

Upvotes: 1

Saketh
Saketh

Reputation: 93

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();

Upvotes: 0

user700284
user700284

Reputation: 13620

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());

Upvotes: 6

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

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

Upvotes: 2

Jon Chan
Jon Chan

Reputation: 979

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>

Upvotes: 1

Rahul Desai
Rahul Desai

Reputation: 15501

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());

Upvotes: 0

Related Questions