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?

Answer 1

可能有更清洁的解决方案，但这将在 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 ''
    });
});

请注意，使用此解决方案，所有具有类portofolio-thumbnail-container的元素都将被更改，并且需要使用＆＃39; a＆＃39;标记始终位于h5内。如果您的页面不符合这些要求，您可能需要更改一些选择器。如果您遇到问题，请发表评论。

演示：https://jsfiddle.net/2gtq7qo9/1/

Answer 2

在没有jQuery的javascript中

[].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并不一定非常讨厌 - 根据jQuery的答案，将其简化为div.portfolio-post a或div[id^="post-"] a之类的内容

Answer 3

您只需要应用该div id

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

Answer 4

使用jQuery非常容易：

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

分配<a> tag to a div using javascript or jQuery

4 个答案: