Question 219747 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can a wrap the content of an element with a <a> tag with the help of jQuery

I have following setup:

<div class="vc_acf organisation">
    <span class="vc_acf-label">Organisation:</span> CLEMI</div>
</div>

I want to change it in:

<div class="vc_acf organisation">
    <span class="vc_acf-label">Organisation:</span> <a href="https://beglobal.toc-web.site/resources/clemi">CLEMI</a></div>
</div>

What I got so far:

(function($) {
    $(".organisation").each(function() {
        $(this).html($(this).html().replace(/CLEMI/g, "<a href='https://beglobal.toc-web.site/resources/clemi'>CLEMI</a>"));
    });

})(jQuery);

This works perfectly but I have dozens of organizations (like CLEMI is one of them). The field .organisation is dynamically created and always changes. So I don’t want to write the jQuery for every organization but find a shortcut to select the content of that element and wrap it a link and also change the url of that link.

*Note sometimes the organization exists of two word, for example: SOS Faim the link should be then: https://beglobal.toc-web.site/resources/sos-faim

Tags:

2

Answers


  1. 0

    This could be solution to your problem

    (function($) {
    $(".organisation").each(function() {
        // Get span label
        var span = $(this).find(".vc_acf-label")[0].outerHTML;
    
        // Get company name
        var text = $(this).contents().filter(function(){return this.nodeType === 3}).text()

        // Make link from company name
        var href = text.trim().replace(" ", "-");
        href = "https://beglobal.toc-web.site/resources/" + href.toLowerCase();
      
       $(this).html(span + " <a href='"+ href +"'>"+ text +"</a>");
    });

})(jQuery);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="vc_acf organisation">
    <span class="vc_acf-label">Organisation:</span> CLEMI
</div>
<div class="vc_acf organisation">
    <span class="vc_acf-label">Organisation:</span> SOS Faim
</div>
    Login or Signup to reply.
  2. 0

    you can try something like this:

    var myContent = $(".organisation").text();

$(myContent).wrap( "<a href='https://beglobal.toc-web.site/resources/clemi'></a>");

    fiddle : https://jsfiddle.net/v3z6eg82/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search