Как выбрать текущий элемент вместе с родителями определенного класса?

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

И Self:

Добавить предыдущий набор элементов в стеке к текущему набору.

Answer 2

Итак, начиная с нижнего элемента, который, как я полагаю, вы получили в обработчике событий, я вызову this (необработанный элемент):

Если вы хотите, чтобы все остальные .div-page.active элементы в любом месте были ниже ближайшего .body-viewport, я думаю, что ваше выражение в значительной степени лучше всего:

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

Если вам нужны только .div-page.active элементы, которые являются предками из this (не братьями и сестрами и т. Д.), Тогда вам придется написать цикл, jQuery не имеет msgstr "найди мне всех предков, соответствующих селектору X, и остановись на совпадении селектора Y". Например, что-то вроде ( живой пример ):

$("#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 и двоюродного брата, чтобы показать, как они не включены:

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

Answer 3

1001 * попробовать *

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