javascript - Jquery select previous element with class - Stack Overflow

admin管理员组

文章数量:1297003

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: /

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/0fzgzce5/

• javascript
• jquery

Share Improve this question Follow asked Nov 18, 2014 at 7:34 Sergey ScopinSergey Scopin 2,2451010 gold badges4040 silver badges7070 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

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./prevAll/

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

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

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./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>

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

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

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

本文标签： javascriptJquery select previous element with classStack Overflow