I have this code:

<ul>
  <li>
    <h3><a class="title" href="page1.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageOne.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <li>
    <h3><a class="title" href="page2.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageTwo.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <!-- [...] -->
</ul>

I have this code:

<ul>
  <li>
    <h3><a class="title" href="page1.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageOne.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <li>
    <h3><a class="title" href="page2.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageTwo.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <!-- [...] -->
</ul>

What I want to do in JS/jQuery: wrap all the images with a link with the same href attribute of a.title.

And I coded up something like this in jQuery, but the result gives to me is only the href of the first a.title:

$("ul li ul li img").each(function() {
  $(this).wrap("<a href='" + $("ul li a.title").attr("href") + "'> </a>");
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <h3><a class="title" href="page1.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageOne.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <li>
    <h3><a class="title" href="page2.html">Post Title</a></h3>
    <ul>
      <li>
        <img src="imageTwo.png" alt="" />
        <p>Some text.</p>
      </li>
    </ul>
  </li>
  <!-- [...] -->
</ul>

• javascript
• jquery
• html

5 Answers 5

This should work (if you fix your HTML^†).

$("ul li ul li img").each(function(){
    $(this).wrap("<a href='"+ $(this).closest("li:has(h3)").find('a.title').attr("href") + "'> </a>");
});

(could also use li:has(a.title) instead of li:has(h3)...)

If your markup is fixed like that, you could also retrieve the value with:

$(this).parents('li').find('a.title').attr('href')

†:

• The a elements need a closing tag.
• The second a element needs the title class.

When you access an attribute or property with attr or prop in jQuery, it will only give you the value from the first element in the result of the selector. In your case, your selector grabs all "ul li a.title" on the page, and so the attribute grabbed is from the first only.

What you want is the closest 'ul li a.title', and to acplish this you can use the 'closest' jQuery function:

$("ul li ul li img").each(function(){
    var closestHref = $(this).closest('a.title').attr('href');
    $(this).wrap("<a href='"+ closestHref + "'> </a>");
});

EDIT: Per Felix ment below, .closest() only searches ancestors. Please see his answer for the correct selector.

<h3><a href="page.html">Post Title</h3>

you forgot to close the anchor tag

it should be

<h3><a href="page.html">Post Title</a></h3>

See here, it works http://jsfiddle/xu6MX/

$("ul li").each(function(){
    $("ul li img",this).wrap("<a href='"+ $("h3 a.title",this).attr("href") + "'> </a>");
});

I update the HTML (i've just added class "article" in the first level and close marker "a")

<ul>
<li class="article">
    <h3><a class="title" href="page1.html">Post Title 1</a></h3>
    <ul>
        <li>
            <img src="image.png" alt=""/>
            <p>Some text 1</p>
        </li>
    </ul>
</li>
<li class="article">
    <h3><a class="title" href="page2.html">Post Title 2</a></h3>
    <ul>
        <li>
            <img src="image.png" alt=""/>
            <p>Some text 2</p>
        </li>
    </ul>
</li>

and here the JS

$(document).ready(function() {

    $(".article").each(function(){
        var img = $(this).find('img');
        var title = $(this).find('.title');
        img.wrap("<a href='"+ title.attr("href") + "'></a>");
    });
});

NB : For this kind of stuff don't forget instruction "document ready"