.toggle() для childNodes / переключать неотображаемые элементы 2 на 2

Question

Вот код, который я застрял слишком долго..

<ul class="list">
   <li> </li>
   <li><p>qwerty</p> </li>
   <li style="display:none;"> </li>
   <li style="display:none;"> </li>
</ul>

В отдельном файле:

function plusArg() {
var ul = document.getElementsByClassName('list')[0];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI' )
ul.childNodes[i].toggle('fade',1000);
//ul.childNodes[i].innerHTML = 'test' ;
}
}

Никаких признаков при вызове функции plusArg():/ (тестовая строка запускается без комментария). Я искал в Google, почему переключение не будет работать с childNodes, но без ответов. Я думаю, что есть веская причина, но вы это знаете? И если нет способа сделать то, что я хочу, таким образом, как я могу сделать это по-другому? Конечная цель состоит в том, чтобы отобразить кучу еще десяти неиспользованных кнопок, нажав уникальную кнопку.

Заранее спасибо!

Answer 1

Спасибо Альберт Кузьмин! Мне удалось достичь того, чего я хотел, благодаря вашему коду! Вот код:

<a href="#a" id="button">Toggle</a>
<ul class="list">
   <li>First</li>
  <li>Second</li>
  <li style="display:none;">Third</li>
  <li style="display:none;">Fourth</li>
  <li style="display:none;">Fifth</li>
  <li style="display:none;">Sixth</li>
</ul>

$("#button").on("click",function(){
   var index = 0;
   $(".list li").each(function(){
   if (!$(this).is(":visible") & index != 2){
       index++;
       $(this).fadeToggle( "slow", "linear" );
   }});
});

Jsfiddle: http://jsfiddle.net/qho65ov4/2/

Answer 2

Вот как это можно сделать с помощью jQuery:

<a href="#a" id="button">Toggle</a>
<ul class="list">
   <li>first</li>
   <li><p>qwerty</p></li>
   <li style="display:none;">Third</li>
   <li style="display:none;">Fourth</li>
</ul>

$("#button").on("click",function(){
    $(".list li").each(function(){
        $(this).fadeToggle( "slow", "linear" );
    });
});

Скрипка: http://jsfiddle.net/qho65ov4/