Проблемы с .clone и ходом внутри (селектор) .each () - PullRequest
Новая
       15

Проблемы с .clone и ходом внутри (селектор) .each ()

1 голос
/ 26 марта 2020

У меня есть некоторая разметка, выводимая для ряда занятий йогой. Я хотел бы переместить / скопировать фотографию инструктора из одной части разметки (скрытой при загрузке страницы) и поместить ее рядом с их именем, которое видно при загрузке страницы.

С 3 классами (и 3 преподавателями) я могу разместить фотографии всех 3 преподавателей в желаемом месте первого курса. К сожалению, я хочу, чтобы фотографии каждого инструктора были размещены в нужных местах только на их собственном курсе.

Здесь вы можете увидеть, что происходит сейчас - https://naada.staging.wpengine.com.

Я успешно клонирую фотографию инструктора на каждом занятии, но я размещаю их все в одном месте вместо их соответствующих курсов. Что я не понимаю с (selector).each или $(this).closest()? Спасибо! 

var instructor = $('div.live-stream-sched healcode-widget .bw-session__details .bw-session__instructor');
instructor.each(function() {
  var photo = $('.bw-session__photo').clone();
  $(this).closest('.bw-session__details').prev().find('.bw-session__group2').prepend(photo);
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="live-stream-sched">
  <!-- First Class -->
  <div class="bw-session">
    <div class="bw-session__basics">
      <div class="bw-session__info">
        <div class="bw-session__time">10:00 AM – 11:30 AM</div>
        <div class="bw-session__group1">LIVEstream Naada Level 2</div>
        <!-- Want to move clone photo here -->
        <div class="bw-session__group2">Kreg Weiss</div>
        <span class="bw-widget__cart_button">Sign Up</span>
      </div>
      <div class="bw-session__details">
        <div class="bw-session__expanded">
          <div class="bw-session__full-title">LIVEstream Naada Level 2 Description</div>
          <div class="bw-session__description">[..]</div>
          <div class="bw-session__instructor" style="">
            <div class="bw-session__photo" style="background-image: url('instructor1.jpg'); "></div>
            <div class="bw-session__instructor-name">Kreg Weiss</div>
            <div class="bw-session__bio">[..]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Second Class -->
    <div class="bw-session">
      <div class="bw-session__basics">
        <div class="bw-session__info">
          <div class="bw-session__time">12:30 PM – 2:00 PM</div>
          <div class="bw-session__group1">LIVEstream Naada Level 1</div>
          <!-- Want to move clone photo here -->
          <div class="bw-session__group2">Kreg Weiss</div>
          <span class="bw-widget__cart_button">Sign Up</span>
        </div>
        <div class="bw-session__details">
          <div class="bw-session__expanded">
            <div class="bw-session__full-title">LIVEstream Naada Level 1 Description</div>
            <div class="bw-session__description">[..]</div>
            <div class="bw-session__instructor" style="">
              <div class="bw-session__photo" style="background-image: url('instructor1.jpg'); "></div>
              <div class="bw-session__instructor-name">Kreg Weiss</div>
              <div class="bw-session__bio">[..]</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Third Class -->
      <div class="bw-session">
        <div class="bw-session__basics">
          <div class="bw-session__info">
            <div class="bw-session__time">3:30 PM – 5:00 PM</div>
            <div class="bw-session__group1">LIVEstream Yoga for Healthy Aging</div>
            <!-- Want to move clone photo here -->
            <div class="bw-session__group2">Susan Bronson</div>
            <span class="bw-widget__cart_button">Sign Up</span>
          </div>
          <div class="bw-session__details">
            <div class="bw-session__expanded">
              <div class="bw-session__full-title">LIVEstream Naada Level 2 Description</div>
              <div class="bw-session__description">[..]</div>
              <div class="bw-session__instructor" style="">
                <div class="bw-session__photo" style="background-image: url('instructor1.jpg'); "></div>
                <div class="bw-session__instructor-name">Susan Bronson</div>
                <div class="bw-session__bio">[..]</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 26 марта 2020

Проблема в том, что вы выбираете все элементы .bw-session__photo. Вам нужно только выбрать тот, который связан с текущим .bw-session__instructor в вашем l oop. Для этого используйте $(this).find(), например: 

var $instructor = $('div.live-stream-sched .bw-session__details .bw-session__instructor');

$instructor.each(function() {
  var $photo = $(this).find('.bw-session__photo').clone();
  $(this).closest('.bw-session__details').prev().find('.bw-session__group2').prepend($photo);
});
.bw-session__photo {
  display: block;
  width: 25px;
  height: 25px;
  background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="live-stream-sched">
  <!-- First Class -->
  <div class="bw-session">
    <div class="bw-session__basics">
      <div class="bw-session__info">
        <div class="bw-session__time">10:00 AM – 11:30 AM</div>
        <div class="bw-session__group1">LIVEstream Naada Level 2</div>
        <!-- Want to move clone photo here -->
        <div class="bw-session__group2">Kreg Weiss</div>
        <span class="bw-widget__cart_button">Sign Up</span>
      </div>
      <div class="bw-session__details">
        <div class="bw-session__expanded">
          <div class="bw-session__full-title">LIVEstream Naada Level 2 Description</div>
          <div class="bw-session__description">[..]</div>
          <div class="bw-session__instructor" style="">
            <div class="bw-session__photo" style="background-image: url('instructor1.jpg'); "></div>
            <div class="bw-session__instructor-name">Kreg Weiss</div>
            <div class="bw-session__bio">[..]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Second Class -->
    <div class="bw-session">
      <div class="bw-session__basics">
        <div class="bw-session__info">
          <div class="bw-session__time">12:30 PM – 2:00 PM</div>
          <div class="bw-session__group1">LIVEstream Naada Level 1</div>
          <!-- Want to move clone photo here -->
          <div class="bw-session__group2">Kreg Weiss</div>
          <span class="bw-widget__cart_button">Sign Up</span>
        </div>
        <div class="bw-session__details">
          <div class="bw-session__expanded">
            <div class="bw-session__full-title">LIVEstream Naada Level 1 Description</div>
            <div class="bw-session__description">[..]</div>
            <div class="bw-session__instructor" style="">
              <div class="bw-session__photo" style="background-image: url('instructor1.jpg'); "></div>
              <div class="bw-session__instructor-name">Kreg Weiss</div>
              <div class="bw-session__bio">[..]</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Third Class -->
      <div class="bw-session">
        <div class="bw-session__basics">
          <div class="bw-session__info">
            <div class="bw-session__time">3:30 PM – 5:00 PM</div>
            <div class="bw-session__group1">LIVEstream Yoga for Healthy Aging</div>
            <!-- Want to move clone photo here -->
            <div class="bw-session__group2">Susan Bronson</div>
            <span class="bw-widget__cart_button">Sign Up</span>
          </div>
          <div class="bw-session__details">
            <div class="bw-session__expanded">
              <div class="bw-session__full-title">LIVEstream Naada Level 2 Description</div>
              <div class="bw-session__description">[..]</div>
              <div class="bw-session__instructor" style="">
                <div class="bw-session__photo" style="background-image: url('instructor1.jpg'); "></div>
                <div class="bw-session__instructor-name">Susan Bronson</div>
                <div class="bw-session__bio">[..]</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
...