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

Share Improve this question Follow edited Apr 19, 2019 at 18:32 double-beep 5,5371919 gold badges4040 silver badges4949 bronze badges asked Jun 17, 2011 at 21:48 RauzippyRauzippy 6166 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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"