Question

I’ve got a list of 4 links displayed in a single div

<div class="title">
  <a href ="www.link1.com"></a>
  <a href ="www.link2.com"></a>
  <a href ="www.link3.com"></a>
  <a href ="www.link4.com"></a>
</div>

followed by 4 descriptions in a single div.

<div class="description">
  <a href ="www.link1.com">Description 1</a>
  <a href ="www.link2.com">Description 2</a>
  <a href ="www.link3.com">Description 3</a>
  <a href ="www.link4.com">Description 4</a>
</div>

I’m looking for a way to use jquery to display the title that relates to the description in their respective divs one at a time. It shouldn’t be a list with 4 lines where each appears on it’s original line with the rest of the div blank, but rather each should appear as if it is the only item in that div. Any help you can give would be amazing. Thanks!

Answer 1

jQuery('.title a').each(function() {
    var j = jQuery(this);
    var title = jQuery('.description a[href=' + j.attr('href') + ']').html();
    j.attr('title', title);
});