CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
Manu
Manu

Reputation: 47

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

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?

Upvotes: 0

Views: 79

Answers (4)

Parth Raval
Parth Raval

Reputation: 4423

You just have to apply that div id 

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

Upvotes: 0

Rick
Rick

Reputation: 9

This is very easy with jQuery:

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

Upvotes: -1

Alexandru Severin
Alexandru Severin

Reputation: 6228

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/

Upvotes: 2

Jaromanda X
Jaromanda X

Reputation: 1

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

Upvotes: 0

Related Questions