jquery - перемещение элемента li из родительского ul и сохранение позиции - PullRequest
Новая
       16

jquery - перемещение элемента li из родительского ul и сохранение позиции

4 голосов
/ 24 сентября 2011

Мне нужно переместить элемент li из родительского ul в главный родительский ul.

Я пробовал это: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">

$( init );

function init() {

 // Move
  $('ul#listcomments').append( $('.children>li') );
  // Delete
  $('.children').remove();
}

</script>

</head>
<body>



<ul id="listcomments">
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
<li>Comment 5 <ul class="children"><li>Child comment of #5 is this</li></ul></li>
<li>Comment 6</li>
<li>Comment 7</li>
<li>Comment 8</li>
</ul>

</body>
</html>

Я хочу добиться этого: * то есть, сделатьchild li # 5детей, выходящих из ul и li и появляющихся прямо под li. 

<ul id="listcomments">
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
<li>Comment 5</li>
<li>Child comment of #5 is this</li>
<li>Comment 6</li>
<li>Comment 7</li>
<li>Comment 8</li>
</ul>

Вместо этого я получаю: * append drop li снаружи, но помещает его в самый конец ul # listcomments 

<ul id="listcomments">
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
<li>Comment 5 </li>
<li>Comment 6</li>
<li>Comment 7</li>
<li>Comment 8</li>
<li>Child comment of #5 is this</li>
</ul>

Надеюсь, это объясняет это лучше, чем использование слов.Это довольно просто как концепция, но с моими ограниченными навыками, я не мог придумать ничего лучшего.

помощь!:)

* Примечание: именование и нумерация lis являются произвольными.И дочерний комментарий может появиться в любом # li.Контент генерируется динамически.

Ответы [ 4 ]

2 голосов
/ 24 сентября 2011

Попробуйте это: 

<script type="text/javascript">
$( init );

function init() {
    $('.children').each(function() {
        // save
        $a=$(this).children('li');
        // Move
        $($a.parent().parent()).after($a);
        // Delete
        $(this).remove();
    });
}
</script>

Это решит вашу проблему независимо от того, сколько существует ul дочерних элементов и сколько у них li дочерних элементов.

1 голос
/ 24 сентября 2011

Попробуйте использовать метод .after(). Заменить $('ul#listcomments').append( $('.children>li') ); на 

$($('.children')[0].parentNode).after($('.childer > li'));
1 голос
/ 24 сентября 2011

Вы также можете использовать метод unwrap () : 

$(".children > li").unwrap();
0 голосов
/ 24 сентября 2011

Я думаю, вы могли бы использовать это 

var a = $('ul.children').html();
  //grab the li

$('ul.children').remove();
  //remove the ul

$('ul#listcomments li:eq(4)').after(a);
  //add the li after the 5th li in the  parent list

Рабочий пример: http://jsfiddle.net/jasongennaro/aDWJF/1/

...