1

私は次のHTMLを持っています：

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

<li>jQueryを使用して、すべてのコンテンツが。で​​囲まれるようにするにはどうすればよいですか<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 
$('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 に答える
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 に答える