Форум

webbaster · #1 (**permalink**) 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
Подскажите, что не так делаю?
Спасибо.

рони · #2 (**permalink**) 21.01.2015, 14:02

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

рони · #3 (**permalink**) 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>

рони · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 21.01.2015, 15:19

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

рони · #7 (**permalink**) 21.01.2015, 15:21

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

Форум

Справочник

Discord чат

Курсы javascript