Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Перемещение коллекции элементов (https://javascript.ru/forum/jquery/53112-peremeshhenie-kollekcii-ehlementov.html)

webbaster 21.01.2015 13:55

Перемещение коллекции элементов
 
Всем привет.
Нужна помощь. Есть список
ul class=b
li Пункт1 /li
li Пункт2 /li
li Пункт3 /li
li Пункт4 /li
li Пункт5 /li
li Пункт6 /li
li Пункт7 /li
li Пункт8 /li
/ul
На выходе мне нужно получить такое
ul
li Пункт1 /li
li Пункт2 /li
li Пункт3 /li
/ul
ul
li Пункт4 /li
li Пункт5 /li
li Пункт6 /li
li Пункт7 /li
li Пункт8 /li
/ul

Задача вроде простая, но ...
var collection;
    var col;

    function go () {
        $('.b li').each(function (index, el) {
            if (index > 3) {
                collection =+ el;
            }
        return collection;
        });
    }
    col = go();
    alert(col);

В результате Undefined
Подскажите, что не так делаю?
Спасибо.

рони 21.01.2015 14:02

webbaster,
странный collection, странный return

рони 21.01.2015 14:12

webbaster,
:-?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       $("<ul/>", {"html": $(".b li:gt(2)")}).insertAfter(".b")
});
  </script>
</head>

<body>
<ul class="b">
    <li>пункт1</li>
    <li>пункт2</li>
    <li>пункт3</li>
    <li>пункт4</li>
    <li>пункт5</li>
    <li>пункт6</li>
    <li>пункт7</li>
    <li>пункт8</li>
</ul>
</body>

</html>

рони 21.01.2015 14:20

webbaster,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var collection = [], ul = $(".b");
    function go() {
        $("li", ul).each(function(index, el) {
            if (index > 2) collection.push(el)
        });
        return collection
    }
    $("<ul/>", {
        "html": go()
    }).insertAfter(ul)
});  </script>
</head>

<body>
<ul class="b">
    <li>пункт1</li>
    <li>пункт2</li>
    <li>пункт3</li>
    <li>пункт4</li>
    <li>пункт5</li>
    <li>пункт6</li>
    <li>пункт7</li>
    <li>пункт8</li>
</ul>
</body>

</html>

registrant 21.01.2015 15:05

<!DOCTYPE HTML>
<html>
<head>
</head>
 
<body>
<div>
<ul>
    <li>пункт1</li>
    <li>пункт2</li>
    <li>пункт3</li>
    <li>пункт4</li>
    <li>пункт5</li>
    <li>пункт6</li>
    <li>пункт7</li>
    <li>пункт8</li>
</ul>
</div>

<script>
d=document.querySelector("div")
d.innerHTML=d.innerHTML.replace(/(3<\/li>)/, "$1</ul><ul>")
</script>
</body>
 
</html>

webbaster 21.01.2015 15:19

Большое спасибо за помощь. Заработало. Понял ошибку - собирать ноды нужно в массив.
Но есть вопрос по коду. Не понятен этот кусок
$("<ul/>", {
"html": go()
})
Не могли бы объяснить, или ссылочку где почитать на эту тему можно?

рони 21.01.2015 15:21

webbaster,
http://api.jquery.com/jQuery/#jQuery-html-attributes


Часовой пояс GMT +3, время: 05:02.