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。即：

<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>'));

编辑：更多说明。

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

3 个答案: