Question

我可能有以下html结构......

<p class="one active"></p><!---get this one--->
<p class="bg bg1"></p><!--from here ^^^---->

<p class="two active"></p><!---get this one--->
<p class="bg bg2"></p><!--from here ^^^---->

或者像这样...

<p class="bg bg1"></p><!--from here vvv---->
<p class="one active"></p><!---get this one--->


<p class="bg bg2"></p><!--from here vvv---->
<p class="two active"></p><!---get this one--->

现在我想从bg找到最近的前一个或下一个p。

对于第一种情况，我这样做：

$(this).prev('.active')

对于第二种情况，我这样做：

$(this).next('.active')

更新注意：我认为我的问题被误解了：

我需要检查html结构...如果活动类是先前的，那么选择之前的其他...

你可以看到问题here。我正在接受@ Barmar的例子

对于第一种情况：活动类按先前顺序排列，第二种情况：活动类按下一个顺序排列....

因此，对于第一种情况：它应该选择上一个和第二种情况：它应该选择下一个。

Answer 1

使用条件运算符：

$(this).prev('.active').length ? $(this).prev('.active') : $(this).next('.active')

Answer 2

如果你想同时选择它们，那么你可以这样做：

$(this).prev('.active').add($(this).next('.active'))

Answer 3

您可以定义方法：

$.fn.nearest = function(selector) {
    return this.next().add(this.prev()).filter(selector); // .first()
}

// Usage
$('.bg').nearest('.active');

$('.bg').nearest(function() {
   return true || false;
});

如何选择最近的前一个或下一个div？

3 个答案: