Question

我有这样的事情：

body-viewport
   div-page.active
    div-panel
     div-page
     div-page
     div-page
     div-page.active //start here

问题：
如果我从底部元素开始，是否有一种简单的查询方法可以选择所有活动页面？

这可行，但......

$('.div-page-active').closest('.body-viewport').find('.div-page-active').doSomething

感谢您的帮助！

Answer 1

$('.div-page-active').closest('.body-viewport').andSelf()

<强> And Self:

将堆栈上的前一组元素添加到当前集合中。

Answer 2

所以从底部元素开始，我假设你已经在事件处理程序中收到了，所以我将调用this（原始元素）：

如果您希望最接近的.div-page.active下的所有其他.body-viewport元素，我认为您的表达式几乎是最佳方式：

$(this).closest(".body-viewport").find(".div-page.active");

如果你只需要.div-page.active 祖先 this的元素（不是兄弟姐妹或堂兄弟等），那么你将不得不写一个循环，jQuery没有“找到我所有的祖先匹配选择器X并停止选择器Y的匹配”。例如，像（live example）：

$("#target").click(function() {
  var done = false;
  $(this).parents().filter(function() {
    var $this;

    if (done) {
      return false;
    }

    $this = $(this);
    if ($this.hasClass("body-viewport")) {
      done = true;
      return true;
    }
    else {
      return $this.hasClass("div-page") && $this.hasClass("active");
    }
  }).add(this).css("color", "green");
  display("Matches turned green.");
  return false;
});

在该示例中，当您点击最下面的.div-page.active时，它会变为那个，.div-page.active几个等级，.body-viewport绿色。像这样（下面粗体显示的匹配，不能在SO上做颜色），请注意我添加了一个不相关的.div-page.active和一个堂兄，以显示它们是如何被包含在内的：

body-viewport
 div-page active -- ancestor, should be included
  div-panel
   div-page
   div-page
   div-page
   div-page active -- click me
  div-page active -- cousin, should NOT be included
body-viewport
 div-page active -- unrelated, should NOT be included

Answer 3

试

$(this).siblings(".div-page-active").doSomething();

如何与某一类的父母一起选择当前元素？

3 个答案: