0

2 番目のリスト項目の後に新しい div を挿入しようとしています。しかし、私はそれの前を閉じて、その直後に</ol>新しいものを開きたいと思っています。<ol>

これ：

<ol>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
    <li>test 4</li>
</ol>

これになるはずです：

<ol>
    <li>test 1</li>
    <li>test 2</li>
</ol>
<div>NEW DIV</div>
<ol>
    <li>test 3</li>
    <li>test 4</li>
</ol>

jQuery:

var el = $('ol li:eq(1)');

el.after('<div>NEW DIV</div>');

ここに私のデモがあります: http://jsfiddle.net/5hhr2/

jQueryでこれを行う方法はありますか?

私はすでにやろうとしましafter('</ol><div>NEW DIV</div><ol>)たが、ここで説明されているように、明らかに機能しません: Using .after() to add html closed and open tags。

4

5 に答える 5

3

試す

var $lis = $('ol li');
$lis.filter(':lt(2)').unwrap().wrapAll('<ol/>').closest('ol').after('<div>NEW DIV</div>');
$lis.filter(':gt(1)').wrapAll('<ol/>');

フィドル

それらすべてを連鎖させたい場合は、次のようにします。

var $lis = $('ol li');
$lis.filter(':lt(2)') //get all the li's with index less than 2 i.e your number
               .unwrap() //unwrap it
               .wrapAll('<ol/>') //wrap them in ol
               .closest('ol').after('<div>NEW DIV</div>').end().end() //append div next to the ol and go back in the chain to the first list of li's
               .filter(':gt(1)') //filter to get remaining items
               .wrapAll('<ol/>'); //wrap them all in a new ol

フィドル

于 2013-09-28T14:35:41.917 に答える
2 
var $oldOL = $("ol"),
    $newOL = $("<div><ol></ol><div>NEW DIV</div><ol></ol></div>");

$newOL.children().eq(0).append($oldOL.children().slice(0, 2)).end().eq(2).append($oldOL.children().slice(0, 2));

$oldOL.replaceWith($newOL.children());

ここにデモがあります：http://jsfiddle.net/5hhr2/9/

アイデアは、それらの間に div を含む新しいリストのセットを作成し、古いリストを新しい HTML 構造に置き換えることです。<ol />要素が 2 つあるため、番号付きリストの番号が再開されます。

于 2013-09-28T14:33:56.163 に答える
2

2 つのリストを作成し、それらの間に新しい div を挿入する必要があります。元のリストの前後に新しいリストを追加し、元のリストを新しい div に置き換えることで、thin を行う多くの方法の 1 つを次に示します。

var list = $('ol'), 
    newList = $('<ol />'), 
    items = list.children(), 
    items1 = items.slice(0,2), 
    items2 = items.slice(2), 
    newDiv = $('<div>NEW DIV</div>');
list
 .before( newList.clone().append( items1 ) )
 .after( newList.clone().append( items2 ))
 .replaceWith( newDiv );

http://jsfiddle.net/5hhr2/12/

または、さらに良い！新しいリストを作成し、元のリストの後に追加し、リスト アイテムの一部をそこに移動します。次に、元のリストの後に新しい div を追加します。

var list = $('ol'), 
    newList = $('<ol />'), 
    items = list.children(),  
    newDiv = $('<div>NEW DIV</div>');
list.after( 
  newList.append( 
    items.slice(2).remove()
  ))
  .after( newDiv );

http://jsfiddle.net/5hhr2/15/

于 2013-09-28T14:44:02.863 に答える
2 
var el = $('ol li');
var elSize = el.length;
var html = '<ol>';
el.each(function(i){            
    if(i > 0 && i % 2 == 0 && i < elSize) {
      html += '</ol><div>NEW DIV</div><ol>';                  
    }    
    html += '<li>' + $(this).text() + '</li>';
});
html += '</ol>';
$('body').html(html);

jsfiddle

于 2013-09-28T14:39:18.947 に答える
0

これを試してください、これはあなたを助けるでしょう、それは理解しやすいです、ここで私は最初にリストの2番目の項目を見つけて、appendメソッドを使用してそこにdivを追加しています..

$('ol li').eq(1).append('<div>New Div</div>');

フィドルHere

于 2013-09-28T14:39:12.513 に答える