Question

This is my HTML code

<div class="anythingWindow">
    <ul class="anythingSlider">
      <li class="panel activePage">
        <div class="content clearfix" style="width: 100%; height: 100%;">
          <a href="http://www.example.com/a.jpg" class="focusedLink">
            <img src= "http://www.example.com/a.jpg"/>
          </a>
          <div class="slider-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
            <a title="" href="#">Read More</a>
          </div>
        </div>
      </li>

      <li class="panel activePage">
        <div class="content clearfix" style="width: 100%; height: 100%;">
          <a href="http://www.example.com/a.jpg" class="focusedLink">
            <img src= "http://www.example.com/a.jpg"/>
          </a>
          <div class="slider-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
            <a title="" href="#">Read More</a>
          </div>
        </div>
      </li>
    </ul>
 </div>

As you can see in div.content > a > img there is image with specific location. How can I copy the URL from this image to the href attribute of div.slider-text > a?

I tried jQuery’s each() method, but couldn’t get it to work.

Answer 1

Try something like this;

$(document).ready(function() {

  $('.anythingSlider .panel').each(function() {
     var $this = $(this);

     // Get src attribute from img
     var url = $this.find('.content a img').first().attr('src');

     // Set href attribute on a
     $this.find('.content .slider-text a').first().attr('href', url);

  });

});