リスト要素内の画像を選択して、div = class "event-title"でdivの上に移動します。

Question

ul内の各リスト要素に対して、画像をdivクラス内の "event-details" class = "event-title"でdivを指定します。

選択して新しい場所に画像を挿入する際に問題があります。私は私が使用しているワードプレスイベントプラグインとして必要なスタイリングを実現するために、これを行う必要があるが、プリセット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()と移動して各リチウムをループする必要があり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>