1

我有以下 HTML：

<ul id="breadcrumb">
    <li>abc</li>
    <li><span>xx</span></li>
    <li>xxxxx</li>
</ul>

我如何使用 jQuery 来制作它，以便每个<li>内容都用<span>. 这是我希望 HTML 的样子：

<ul id="breadcrumb">
    <li><span>abc</span></li>
    <li><span>xx</span></li>
    <li><span>xxxxx</span></li>
</ul>

请注意。的某些内容可能<li>已经包含在<span>. 我不想对那些做任何事情。

4

9 回答 9

3

利用：

$('li').each(function(){
    if($(this).children('span').length == 0){
        $(this).wrapInner('<span/>');
    }
})

在这里检查小提琴：http: //jsfiddle.net/9S4tH/

于 2012-12-21T11:00:05.627 回答
3

这个怎么样：

//iterate through each <li> child of #breadcrumb
$("#breadcrumb > li").each(function() {
   //select only those li who doesn't have span child
   if($(this).children('span').length < 1) {
        //wrap it with span
        $(this).html("<span>" + $(this).html() + "</span>");

   }
});
于 2012-12-21T11:00:41.120 回答
2

尝试这个：

$("li").each(function() {
    if (!$('span', this).length) {
        $(this).wrapInner('<span></span>');
    }
});

示例小提琴

于 2012-12-21T11:01:59.510 回答
0

使用 WrapInner() jquery 方法。

 $(this).wrapInner('<span></span>');
于 2012-12-21T11:08:56.100 回答
0

也许更优雅一点，试试这个：

$("#breadcrumb li:not(:has(span))").wrapInner("<span>");​​​​​​​

http://jsfiddle.net/39HC4/1/

于 2012-12-21T11:11:55.503 回答
0 
$('ul li:not(:has(span))').each(function(){
   $(this).html('<span>'+$(this).html()+'</span>');
  });

小提琴

于 2012-12-21T11:18:46.793 回答
0

像这样的东西怎么样，虽然我承认我没有测试过：

$('#breadcrumb li')each(function() {
    $(this).html("<span>" + $(this).html() + "</span>");
});
于 2012-12-21T11:00:18.920 回答
0 
$(document).ready(function() {
    $('#breadcrumb li').each(function() {
        $(this).html($('<span />').html($(this).html()));
    });
});

这个怎么运作：

对于面包屑中的每个li，将li的html设置为一个span元素，并将span的html内容设置为li的原始html内容。

笔记：

jQuery 建议在创建新元素时，您可以这样做...

$('<span />')

而不是像这样附加文字......

'<span>' + text + '</span>'

因为后者在某些情况下可能会产生不希望的结果。

于 2012-12-21T11:01:05.687 回答
0

尝试这样的事情：

$("#breadcrumb li").each(function(item) {
    // $(this) - its your <li> element
    $(this).html("<span>" + $(this).text() + "</span>");    
});
于 2012-12-21T11:01:59.363 回答