.clone 的问题 & 在 (selector).each() 内遍历

Question

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

有了 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

问题是因为您 select 所有 .bw-session__photo 元素。您只需要 select 与循环中当前 .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>

.clone 的问题 & 在 (selector).each() 内遍历

Problems with .clone & traverse within (selector).each()

jquery

clone

each