希望在列表元素中选择图像并将其移动到 div 上方，并使用 class="event-title"

Question

对于UL中的每个列表元素，我想在div class =" event-details"中的div中移动图像，而class =" event-title"。p>我在选择方面遇到麻烦，并将图像插入新地方。我需要这样做以实现我想要的样式，因为我使用的WordPress事件插件带来了预设html

index.html

<ul class="event-list-view">
  <li class="event 2017 2017april">
    <div class="event-date">
      <div class="start-date">
        <div class="event-weekday">Sat</div>
        <div class="event-day">01</div>
        <div class="event-month">Apr</div>
        <div class="event-year">2017</div>
      </div>
    </div>
    <div class="event-info single-day">
      <div class="event-title">
        <h3><a href="http://128sqnatc.org.uk/events/?event_id1=1">Swynnerton Camp 1</a></h3>
      </div>
      <span class="event-location">Swynnerton</span>
      <div class="event-details">
        <p><img class="alignnone size-large wp-image-32" src="img/news1.png" alt="" width="1024" height="576" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia imperdiet velit, maximus gravida sem mollis vel. Pellentesque eu imperdiet leo, vitae viverra justo. Ut bibendum justo pellentesque tellus vulputate cursus. Cras dapibus porta neque, non porttitor mi dignissim eu. Nam orci magna, porta sed hendrerit in, mollis ac metus. In fringilla, leo ut suscipit porta, mauris turpis porttitor justo, imperdiet placerat nisl massa vitae urna.</p>
      </div>
    </div>
  </li>
  <li class="event 2017 2017april">
    <div class="event-date">
      <div class="start-date">
        <div class="event-weekday">Sun</div>
        <div class="event-day">02</div>
        <div class="event-month">Apr</div>
        <div class="event-year">2017</div>
      </div>
    </div>
    <div class="event-info single-day">
      <div class="event-title">
        <h3><a href="http://128sqnatc.org.uk/events/?event_id1=2">Swynnerton Camp 2</a></h3>
      </div>
      <span class="event-location">Swynnerton</span>
      <div class="event-details">
        <p><img class="alignnone size-full wp-image-112" src="img/dofe.png" alt="" width="553" height="369" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia imperdiet velit, maximus gravida sem mollis vel. Pellentesque eu imperdiet leo, vitae viverra justo. Ut bibendum justo pellentesque tellus vulputate cursus. Cras dapibus porta neque, non porttitor mi dignissim eu. Nam orci magna, porta sed hendrerit in, mollis ac metus. In fringilla, leo ut suscipit porta, mauris turpis porttitor justo, imperdiet placerat nisl massa vitae urna.</p>
      </div>
    </div>
  </li>
</ul>

Answer 1

您需要使用each()循环循环每个LI并使用prepend()：

移动图像

$(function() {
  // Loop each li
  $( "ul.event-list-view li" ).each(function( index ) { 
    // Move image into .event-info
    $(this).find(".event-info").prepend($(this).find(".event-details img"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="event-list-view">
  <li class="event 2017 2017april">
    <div class="event-date">
      <div class="start-date">
        <div class="event-weekday">Sat</div>
        <div class="event-day">01</div>
        <div class="event-month">Apr</div>
        <div class="event-year">2017</div>
      </div>
    </div>
    <div class="event-info single-day">
      <div class="event-title">
        <h3><a href="http://128sqnatc.org.uk/events/?event_id1=1">Swynnerton Camp 1</a></h3>
      </div>
      <span class="event-location">Swynnerton</span>
      <div class="event-details">
        <p><img class="alignnone size-large wp-image-32" src="img/news1.png" alt="Image1" width="1024" height="576" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia imperdiet velit, maximus gravida sem mollis vel. Pellentesque eu imperdiet leo, vitae viverra justo. Ut bibendum justo pellentesque tellus vulputate cursus. Cras dapibus porta neque, non porttitor mi dignissim eu. Nam orci magna, porta sed hendrerit in, mollis ac metus. In fringilla, leo ut suscipit porta, mauris turpis porttitor justo, imperdiet placerat nisl massa vitae urna.</p>
      </div>
    </div>
  </li>
  <li class="event 2017 2017april">
    <div class="event-date">
      <div class="start-date">
        <div class="event-weekday">Sun</div>
        <div class="event-day">02</div>
        <div class="event-month">Apr</div>
        <div class="event-year">2017</div>
      </div>
    </div>
    <div class="event-info single-day">
      <div class="event-title">
        <h3><a href="http://128sqnatc.org.uk/events/?event_id1=2">Swynnerton Camp 2</a></h3>
      </div>
      <span class="event-location">Swynnerton</span>
      <div class="event-details">
        <p><img class="alignnone size-full wp-image-112" src="img/dofe.png" alt="Image2" width="553" height="369" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia imperdiet velit, maximus gravida sem mollis vel. Pellentesque eu imperdiet leo, vitae viverra justo. Ut bibendum justo pellentesque tellus vulputate cursus. Cras dapibus porta neque, non porttitor mi dignissim eu. Nam orci magna, porta sed hendrerit in, mollis ac metus. In fringilla, leo ut suscipit porta, mauris turpis porttitor justo, imperdiet placerat nisl massa vitae urna.</p>
      </div>
    </div>
  </li>
</ul>