CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
Saladon
Saladon

Reputation: 85

Wrap a bunch of images with links

I have a wordpress menu like this

<?php wp_nav_menu(
      array(
       'menu' => 'Property Menu', 
       'after' => '<img src="'.get_stylesheet_directory_uri().'/images/btn.png" class="button-img">' 
    )); ?>

I want to wrap that image after each menu item with the menu link. So far I have the following, but it is using the first menu item link for all images:

<script type="text/javascript">
$(document).ready(function() {
  $('.button-img').wrap('<a href="' + $('.button-img').parent().children().first().attr('href') + '" />');
});
</script>

Thank you in advance.

Upvotes: 1

Views: 73

Answers (1)

MrCode
MrCode

Reputation: 64536

Pass a function and then you can use $(this) to refer to the current element in the set. That will prevent it from applying to all images on each iteration.

$('.button-img').wrap(function(){
    return '<a href="' + $(this).parent().children().first().attr('href') + '" />';
});

Upvotes: 2

Related Questions