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

huangapple go评论83阅读模式
英文:

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

问题

我有以下设置:

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

我想要将其更改为:

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

到目前为止,我得到了以下结果:

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

})(jQuery);

这个方法完美地工作,但我有几十个组织(比如CLEMI是其中之一)。.organisation字段是动态创建的,而且总是在变化。因此,我不想为每个组织编写jQuery代码,而是找到一种快捷方式来选择该元素的内容,并用链接包装起来,同时更改该链接的URL。

*注意:有时组织由两个单词组成,例如:SOS Faim,链接应为:https://beglobal.toc-web.site/resources/sos-faim

英文:

I have the following setup:

&lt;div class=&quot;vc_acf organisation&quot;&gt;
    &lt;span class=&quot;vc_acf-label&quot;&gt;Organisation:&lt;/span&gt; CLEMI&lt;/div&gt;
&lt;/div&gt;

I want to change it to:

&lt;div class=&quot;vc_acf organisation&quot;&gt;
    &lt;span class=&quot;vc_acf-label&quot;&gt;Organisation:&lt;/span&gt; &lt;a href=&quot;https://beglobal.toc-web.site/resources/clemi&quot;&gt;CLEMI&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;

What I got so far:

(function($) {
    $(&quot;.organisation&quot;).each(function() {
	    $(this).html($(this).html().replace(/CLEMI/g, &quot;&lt;a href=&#39;https://beglobal.toc-web.site/resources/clemi&#39;&gt;CLEMI&lt;/a&gt;&quot;));
    });

})(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

答案1

得分: 0

这可能是解决你问题的方法:

(function($) {
    $(".organisation").each(function() {
        // 获取 span 标签
        var span = $(this).find(".vc_acf-label")[0].outerHTML;
    
        // 获取公司名称
        var text = $(this).contents().filter(function(){return this.nodeType === 3}).text()

        // 从公司名称创建链接
        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>

希望对你有帮助!

英文:

This could be solution to your problem

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

(function($) {
    $(&quot;.organisation&quot;).each(function() {
        // Get span label
        var span = $(this).find(&quot;.vc_acf-label&quot;)[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(&quot; &quot;, &quot;-&quot;);
        href = &quot;https://beglobal.toc-web.site/resources/&quot; + href.toLowerCase();
      
       $(this).html(span + &quot; &lt;a href=&#39;&quot;+ href +&quot;&#39;&gt;&quot;+ text +&quot;&lt;/a&gt;&quot;);
    });

})(jQuery);

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;vc_acf organisation&quot;&gt;
    &lt;span class=&quot;vc_acf-label&quot;&gt;Organisation:&lt;/span&gt; CLEMI
&lt;/div&gt;
&lt;div class=&quot;vc_acf organisation&quot;&gt;
    &lt;span class=&quot;vc_acf-label&quot;&gt;Organisation:&lt;/span&gt; SOS Faim
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

你可以尝试像这样的代码:

var myContent = $(&quot;.organisation&quot;).text();

$(myContent).wrap( &quot;&lt;a href=&#39;https://beglobal.toc-web.site/resources/clemi&#39;&gt;&lt;/a&gt;&quot;);

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

英文:

you can try something like this:

var myContent = $(&quot;.organisation&quot;).text();

$(myContent).wrap( &quot;&lt;a href=&#39;https://beglobal.toc-web.site/resources/clemi&#39;&gt;&lt;/a&gt;&quot;);

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

huangapple
  • 本文由 发表于 2023年7月31日 18:25:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76802708.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定