单击时在锚链接周围创建新div

Question

如何使用jquery实现此行为：

默认状态：

<a href="something.html">Anchor</a>

点击状态

<div class="highlight">
<a href="something.html">Anchor</a>
</div>

Answer 1

好吧，你可以使用jQuery“wrap”函数：

$('#idOfAnchor').click(function(a) {
  $(a).wrap($('<div/>').addClass('highlight'));
});

然而，这似乎是一种有趣的想法。为什么不直接将类添加到<a>元素本身？

哦对不起 - 你的问题说“点击”，但解释说“悬停”。这会有点棘手，因为当你鼠标移出时你会想要摆脱那个额外的div。再说一次，如果这是我的页面，我根本就不会这样做。你想要实现的是什么？

再次修改：好了，现在又说“点击”： - ）

Answer 2

最快的方法：

$('a').click(function() {
  $(this).wrap($('<div/>', { 'class': 'highlight'}));
});

然而，这可能是你想要的，更简单的只是使用你想要的任何CSS效果：

$('a').click(function() {
  $(this).addClass('highlight'});
});

Answer 3

结帐jQuery的wrap功能。

$(this).wrap('<div class="highlight"></div>');

Answer 4

你为什么不直接设计a：hover？

CSS中的类似内容：

.highlight a {
    /* style */
}

.highlight a:hover {
    /* hover style */
}

然后将您的HTML更改为：

<a href="something.html" class='highlight'>Anchor</a>