英文:
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:
<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
答案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($) {
$(".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);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
你可以尝试像这样的代码:
var myContent = $(".organisation").text();
$(myContent).wrap( "<a href='https://beglobal.toc-web.site/resources/clemi'></a>");
fiddle : https://jsfiddle.net/v3z6eg82/
英文:
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/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论