0

I have the following setup:

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

I want to change it to:

<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 with a link and also change the URL of that link.

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

Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
CliffVandyck
  • 164
  • 11
  • "*The field .organisation is dynamically created and always changes*" - changes how, is it predictable? Is the relevant organisation in the same place? Are the URLs always in the same format, an organisation called "CLEMI" has the URL of `https://example.com/resources/clemi`, would "ACME" follow the same pattern, to give `https://example.com/resources/acme`, or something else? – David Thomas Jul 31 '23 at 10:30
  • can you wrap a div/span around you rext "CLEMI"? – Suresh Kamrushi Jul 31 '23 at 10:32
  • @DavidThomas What I mean with the field changes dynamically: it is on another page. So the organisation field isn't gonna change after the page is loaded. It always appear on the same place and URL's are always in the same format and will follow the same pattern – CliffVandyck Jul 31 '23 at 10:35

2 Answers2

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>
Nebojsa Nebojsa
  • 1,395
  • 1
  • 7
  • 19
  • 1
    It could be and it is! Thank you so much! – CliffVandyck Jul 31 '23 at 10:49
  • @AlexanderNenashev you don't need to be angry just because your code is not working, and mine is work. We are here to help people. – Nebojsa Nebojsa Jul 31 '23 at 10:57
  • This is a very specific, one-off solution. Yes it could be amended to handle different solutions, but then that's exactly what OP was trying to avoid. For anyone seeing this in the future, the more reusable solution would be to use `.contents().filter()` (eg based on https://stackoverflow.com/a/53321648/2181514) and then customised to build the link from the text. I was expecting this question to be closed as a duplicate of *many* similar requests, but glad you got a solution to your specific issue. – freedomn-m Jul 31 '23 at 11:04
  • Answer updated to use `contents().filter()` – Nebojsa Nebojsa Jul 31 '23 at 11:18
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/

Suresh Kamrushi
  • 15,627
  • 13
  • 75
  • 90