assign an <a> tag to a div using javascript or jQuery

Question

I'm working on a website on WordPress and the following code is being generated by a WordPress theme several times:

<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class="  width2 white all portfolio-post portfolio-thumbnail no-padding"> 
    <figure class="portfolio-thumbnail-container">
        <div class="thumbnail-image">
            <img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
        </div>
        <figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
            <h5 class="heading heading-underlined portfolio-thumbnail-heading">
                <a href="http://mysiste.com/relaunch/portfolio/mysite/">My site</a>
            </h5>
            <ul class="portfolio-category list-inline">
            </ul>
        </figcaption>
    </figure>               
</div>

And I need to move the <a> tag on each generated piece of code to "wrap" another section of the code, It should be like this:

<div style="max-width: 700px; position: absolute; left: 0px; top: 0px;" id="post-394" class="  width2 white all portfolio-post portfolio-thumbnail no-padding">
    <a href="http://mysiste.com/relaunch/portfolio/mysite/">    
        <figure class="portfolio-thumbnail-container">
            <div class="thumbnail-image">
                <img src="http://mysiste.com/relaunch/wp-content/uploads/2015/12/hota2xFeaturedImage.jpg" class="attachment-post-thumbnail wp-post-image" alt="hota2xFeaturedImage" height="320" width="700">
            </div>
            <figcaption class="portfolio-thumbnail-caption portfolio-thumbnail-attachments text-right">
                <h5 class="heading heading-underlined portfolio-thumbnail-heading">
                    My site
                </h5>
                <ul class="portfolio-category list-inline">
                </ul>
            </figcaption>
        </figure>       
    </a>        
</div>

Since I can't edit the code because everything is generated by WordPress shortcodes. Is there a way to do it using JavaScript or jQuery for all the generated divs?

Alexandru Severin · Accepted Answer · 2016-01-09 15:07:56Z

2

There might be cleaner solution, but this will get the job done in jQuery

$(function(){    // is runned after the page loads
    $('.portfolio-thumbnail-container').each(function() {
         var a = $(this).find('a');   // extract <a/> in a variable
         a.parent().html(a.html());   // replace the content of a's parent with a's content
         $(this).wrap(a.empty()));    // wrap the thumbnail-contailer with the <a> tag, replacing the old content of a with ''
    });
});

Note that with this solution all elements with class portofolio-thumbnail-container will be altered and it requires that the 'a' tag is always inside the h5. If your page does not meet these, you may need to change some selectors. If you're having problems with that leave a comment.

demo: https://jsfiddle.net/2gtq7qo9/1/

edited Jan 9, 2016 at 15:07

answered Jan 9, 2016 at 14:56

Alexandru Severin

6,44812 gold badges54 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaromanda X · Accepted Answer · 2016-01-09 14:59:01Z

0

in javascript without jQuery

[].forEach.call(document.querySelectorAll('div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a'), function(a) {
    var h5 = a.parentNode;
    var figure = h5.parentNode.parentNode;
    var div = figure.parentNode;

    div.appendChild(a);
    h5.textContent = a.textContent;
    a.textContent = '';
    a.appendChild(figure);
});

div.width2.white.all.portfolio-post.portfolio-thumbnail.no-padding figure figcaption h5 a doesn't have to be so nasty - whittle it down to maybe something like div.portfolio-post a or something like div[id^="post-"] a as per the jQuery answer

edited Jan 9, 2016 at 14:59

answered Jan 9, 2016 at 14:52

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

6 Comments

Manu Over a year ago

This is a better solution, but the final issue is that the text into <h5> tag is being printed outside the div, if you can tell me how to hide it we'll be done :D

Jaromanda X Over a year ago

That must be a style issue ... the html is exactly as you require

Rajaprabhu Aravindasamy Over a year ago

@Manu You should try writing some code on your own. Are you expecting us to write even a full stop for you?

Jaromanda X Over a year ago

if you want to hide the text in h5, remove the line that says h5.textContent = a.textContent

Manu Over a year ago

No I don't in fact I was trying to remove it by myself, using the attr function, and @JaromandaX is right, maybe it's a css issue, thank you very much for your help guys!

|

Paaarth · Accepted Answer · 2017-12-14 09:15:00Z

0

You just have to apply that div id

document.getElementById("lnk").href = "https://jsfiddle.net/Parth_Raval/67n70pe2";

edited Dec 14, 2017 at 9:15

answered Jan 9, 2016 at 16:02

Paaarth

4,4693 gold badges26 silver badges39 bronze badges

Comments

Manu · Accepted Answer · 2016-01-09 16:36:22Z

-1

This is very easy with jQuery:

$(".portfolio-thumbnail-container").click(function(){
   window.location.href = "http://mysiste.com/relaunch/portfolio/mysite/";
});

edited Jan 9, 2016 at 16:36

Manu

471 silver badge10 bronze badges

answered Jan 9, 2016 at 14:47

Rick

94 bronze badges

1 Comment

Manu Over a year ago

But it will trigger the opening action of the link, it has to be a link instead open the new window once it's clicked. Besides each generated piece of code will not redirect to the same link.

Collectives™ on Stack Overflow

assign an <a> tag to a div using javascript or jQuery

4 Answers 4

Comments

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related