Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stuart McPherson
Stuart McPherson
15,939 Points

Looking to select image within list element and move it above the div with class="event-title".

For each list element within the ul, I want to move the image within the div class="event-details" above the div with the class="event-title".

I'm having trouble with selections and inserting the image in the new place. I need to do this to achieve the styling I want as the wordpress Event plugin I'm using brings in preset 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>