javascript - 在指定元素的第一部分和最后一部分插入元素

Question

我有这个代码。

<ul class="menu">
    <li class="current_page_item"><a href="http://localhost/wordpress/"     title="Home">Home</a></li>
    <li class="page_item page-item-8"><a href="http://localhost/wordpress/?page_id=8">About</a></li>
    <li class="page_item page-item-23"><a href="http://localhost/wordpress/?page_id=23">Contact</a></li>
    <li class="page_item page-item-7"><a href="http://localhost/wordpress/?page_id=7">Gallery</a></li>
</ul>

我想要的是在ul（.menu）中插入一个span（）元素。我想把它放在第一个之前li和最后一个（.menu）li里面。ul所以预期的输出应该是这样的。

<ul class="menu">
    <span<> <!-- this is the inserted element -->
    <li class="current_page_item"><a href="http://localhost/wordpress/"     title="Home">Home</a></li>
    <li class="page_item page-item-8"><a href="http://localhost/wordpress/?page_id=8">About</a></li>
    <li class="page_item page-item-23"><a href="http://localhost/wordpress/?page_id=23">Contact</a></li>
    <li class="page_item page-item-7"><a href="http://localhost/wordpress/?page_id=7">Gallery</a></li>
    </span<> <!-- this is the inserted element -->
</ul>

到目前为止我尝试过的是这个。

$(document).ready(function(){
    $('<span>').insertBefore('.menu li:first-child');
    $('</span>').insertBefore('.menu li:last-child');
});

我将不胜感激在这件事上的任何帮助。

Answer 1

如果您真的喜欢这样做，这将起作用。

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

http://jsfiddle.net/mG8yV/1

Answer 2

在 ul 的开头添加一个新的 li。IE：

<li id="spanli"></li>

然后在 jquery 中添加 span 元素：

$('#spanli').append("<span id='mynewspan'></span>");      

工作示例：http: //jsfiddle.net/ZDr5e/2/

Answer 3

将 span 元素插入到匹配元素集合 $('.menu') 中每个元素的开头。

$('.menu').prepend($('<span>'));

将 span 元素插入到匹配元素集合 $('.menu') 中每个元素的末尾。

$('.menu').append($('<span>'));

编辑：更多描述。