Question

我有3个元素：

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

点击target div我在我的js中测试.prev()函数

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

输出类似于：'Second undefined'，但应该是：'second first'如果我理解了.prev（）用法的参数。我怎样才能获得某个类的第一个前一个元素呢？这是小提琴：http://jsfiddle.net/0fzgzce5/

Answer 1

来自jQuery docs，

.prev()

描述：获取每个元素的前一个兄弟   匹配元素的集合，可选择由选择器过滤。

选择所有前面的兄弟元素，而不仅仅是   在相邻的兄弟之前，使用.prevAll（）方法。

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

所以你应该使用console.log($(this).prevAll('.first').html());

Answer 2

您可以使用sibling()，它将返回具有特定类的元素，并且与调用元素的级别相同。但请确保在target

之后没有相同的div

$(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

使用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 4

您也可以使用$("div:eq(3)")来获取确切的元素。最好的例子是$("ul li:eq(3)")

Answer 5

在您的第二个console.log()中，您this仍然是.target且没有.first课程，所以它是undefined。

要进行第一次潜水，请执行以下操作：

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

Answer 6

Jquery .prev()总是立刻得到兄弟姐妹。

如果您将选择器作为参数传递，它将过滤前面的元素以匹配，如果它不匹配，它将返回undefined，在您的情况下发生这种情况

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

与

相同

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

将返回＆＃34; Second＆＃34;

如果你通过了除了＆＃39; .second＆＃39;之外的任何选择器。它总是返回undefined所以，你的情况

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

是表达式，返回undefined因为＆＃39; .first＆＃39;与前面的元素选择器不匹配。

<强>更新如果你想获得第一次使用

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

Jquery用class选择前一个元素

6 个答案: