将文本创建为超链接

Question

我有代码

<div class="row1">
<em>My text</em>
</div>

我要如何创建一个类似于以下链接的链接：

<div class="row1">
<em><a href="/mylink">My text</a></em>
</div>

我理解问题很基础，但找不到同样简单的解决方案。

- Viktor Bogutskii

Answer 1

你可以结合 contents() 和 wrapAll() 一起使用：

$(".row1 em").contents().wrapAll("<a href='/mylink'></a>");

- Frédéric Hamidi

---

这就是我说的！(https://dev59.com/DFnUa4cB1Zd3GeqPd86_#6897723) - Eric

@Eric，抱歉，在我回复之前我没有看到你的答案 :) - Frédéric Hamidi

没问题。你记得发布文档链接了，从很多方面来说这是更好的。 - Eric

Answer 2

$('.row1 em').html(function(i, contents) {
    return '<a href="/mylink">' + contents + '</a>';
});

或者

 $('.row1 em').contents().wrapAll('<a href="/mylink" />');

- Eric

Answer 3

你可以尝试这个 -

$(".row1 em").contents().wrapAll("<a href='/mylink'></a>")

- Vivek

---

我的回答和@Frédéric Hamidi的回答是重复的。请参考链接：https://dev59.com/DFnUa4cB1Zd3GeqPd86_#6897749。 - Eric

那么，每个人都有权写出他们的建议，如果与其他答案相符，那有什么问题呢？ - Vivek

Answer 4

例子：

$('.row1 em').wrap('<a href="/mylink" />');

更新：由于这将使<a>标签包围<em>而不是它的内容，正确的方法是像Frederic所说的那样使用$('.row1 em').contents().wrap('<a href="/mylink" />');。

- Semyazas

---

错误！这会将<a>放在<em>周围。 - Eric

我不明白为什么改变这些标签出现的顺序就会导致负评。在 a 标签内使用 em 标签是完全有效的。 - Semyazas

可能是因为这并不是问题所要求的内容？ - Eric

是的，它与工作描述中的有些不同，但仍然有效。这个解决方案可行并且我很适合。谢谢！ - Viktor Bogutskii

Answer 5

$('.row1 em').html().wrap('<a href="/mylink">');

- calumbrodie

---

错误！.html() 返回一个字符串！ - Eric

是的 - 你说得对，这个答案完全错误。我不会编辑它。 - calumbrodie

Answer 6

如果您的目标是超链接文本，并且您可以承受替代解决方案，则以下内容可以实现相同效果：

HTML：

<div class="row1">
    <em>My text</em>
</div>

CSS：

.row1 {
    cursor:pointer;
}

JS：

$('.em').click(function() {
    location.href = '/mylink';
});

- Vivek Pandey

---

不要在 JavaScript 中创建链接，它们极易影响可用性。如果我没有启用 JS 怎么办？如果我想在另一个标签页中打开链接怎么办？如果我想在单击之前查看链接指向的位置怎么办？ - Tatu Ulmanen

在其他方面达成了一致，但不同意禁用JS，因为问题本身带有javascript/jquery标签，并且其他解决方案也使用jquery。 - Vivek Pandey