.clone & traverse inside (selector).each() 的问题

Question

我为一些瑜伽课输出了一些标记。我想从标记的一部分移动/复制教师照片（在页面加载时隐藏）并将其放在他们的名字旁边，这在页面加载时可见。

通过 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>

Answer 1

问题是因为您选择了所有 .bw-session__photo 元素。您只需在循环中选择与当前.bw-session__instructor 相关的一项。为此，请使用$(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>