0

Получить классы родителей элемента в виде строки. к примеру при нажатии на кнопку Next должно вернуться (step step-5 card/card-footer text-right/btn btn-primary action-next-step action-done)

            <div class="step step-5 card">
                <div class="card-header">
                    Open job
                </div>
                <div class="card-body">
                    <p class="card-text">
                        Please open any job and click Done
                    </p>
                </div>

                <div class="card-footer text-right">
                    <button type="button" class="btn btn-secondary action-next-step">Back</button>
                    <button type="button" class="btn btn-primary action-next-step">Skip</button>
                    <button type="button" class="btn btn-primary action-next-step action-done">
                        Next
                    </button>
                </div>
            </div>

3
  • Нужно больше золот... подробностей. Какого родителя?
    – ThisMan
    3 авг 2018 в 7:41
  • грубо говоря, нужно составить список селекторов до элемента на который нажали. 3 авг 2018 в 7:45
  • Начиная с какого родительского элемента? С самого <html>?
    – user218976
    3 авг 2018 в 7:55

1 ответ 1

3

document.onclick = ({target}) => {
  const classes = [];
  let parent = target;
  
  // циклом проходим по всем родителям элемента, пока не доберемся до body
  while(parent && parent !== document.body) {
      if(parent.classList) { // если классов нет, то classList = undefined
        classes.push(parent.classList.value); // получаем классы текущего элемента
      }
      parent = parent.parentNode; // получаем родителя текущего элемента
  }
  
  console.log(classes.reverse().toString());
}
.container div {
  padding: 20px;
  display: inline-block;
  border: 1px solid  #333;
  border-radius: 3px;
}

.a {
  background: #333;
}

.b {
  background: red;
}

.c {
  background: blue;
}

.d {
  background: yellow;
}

.e {
  background: green;
}

.f {
  background: #333;
}

.g {
  background: #333;
}

.h {
  background: #333;
}

.i {
  background: #fff;
}
<div class='container'>
  <div class='a'>
    <div class='b b1 b2 b3'>
      <div class='c'>

      </div>
      <div class='d d1'>
        <div class='e'>

        </div>
      </div>
      <div class='f'>
        <div class='g g1 g2'>
          <div class='h'>

          </div>
        </div>
      </div>
    </div>
    <div class='i i1'>

    </div>
  </div>
</div>

4
  • Осталось только инвертировать строку, чтобы классы располагались от первого родителя до последнего
    – user218976
    3 авг 2018 в 7:56
  • @Anamnian зачем инвертировать? На первом месте самый ближайший родитель, в конце самый последний родитель ( перед body )
    – ThisMan
    3 авг 2018 в 7:58
  • "должно вернуться (step step-5 card/card-footer text-right/btn btn-primary action-next-step action-done)" т.е. автор хотел чтобы классы были от самого верхнего до самого нижнего, и в конце классы самого элемента, по которому произошел клик.
    – user218976
    3 авг 2018 в 7:58
  • @Anamnian он вопрос обновил, когда я уже ответ написал. Поправил
    – ThisMan
    3 авг 2018 в 8:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.