导航li通过jquery在文本周围创建<span> </span>

时间:2013-10-27 03:41:47

标签: jquery append html prepend

我一整天都在尝试并阅读一些内容,但由于某些原因我的代码无法正常工作

我想要实现的是:当我在索引页面中创建一个无序列表时 - 我希望我的jquery自动添加锚点中的文本。所以我希望它看起来像这样

<li><a href="index.htm"><span>Home</span></a></li>

虽然我只是添加:

<li><a href="index.htm">Home</a></li>

我想这样做是因为我有很多列表项而不是在我添加页面时写作,从长远来看最节省时间并创建一个循环来处理我随时添加的内容之一。

这是我到目前为止所做的事情(对不起,如果看起来很难看):

$('document').ready(function () {
    var begSpan = "<span>";
    var endSpan = "</span>";
    $('p').each(function () {
        $(this) prepend(begSpan);
    }).append(endSpan);
});

我怎样才能为我自动创建span标签

3 个答案:

答案 0 :(得分:2)

$(document).ready(function() {
    $('li a').wrapInner('<span/>');
});

Fiddle

.wrapInner() docs

我还建议您使用更具体的选择器(例如#menuId li a)来保证未来。


我的原始答案使用.wrap()生成li > span > a DOM结构,但您所请求的结构似乎是li > a > span,可以使用.wrapInner()来实现。

答案 1 :(得分:2)

您要找的是.wrapInner()

$(document).ready(function() {
    $('li a').wrapInner('<span/>');
});

演示:Fiddle

答案 2 :(得分:1)

使用.wrap()

$(document).ready(function() {
    $('li > a').wrap('<span>');
});

DEMO