jqueryのslideDown関数を制限しますか？

Question

私はhtmlの行のリストを持っています。彼らはこのように見える。

<div class="list"> 
<div class="line"></div> 
... 
</div> 

私は線を表示するjqueryの機能slideDown（）を呼び出します。私ができるようにしたいのは、それが表示する線の数を制限することです。どうやってやるの？

Answer 1

このコードは、すべてのリストを下にスライドします：

<script> 
    $(document).ready(function() { 
     $('.list').click(function() { 
      $(this).slideDown('slow'); 
     }); 
    }); 
</script> 

な方法の一つは、いくつかの行をラップすることです：

<div class="list"> 
    <div class="list-wrapper"> 
     <div class="line"></div> 
     ... 
    </div> 
    <div class="line"></div> 
    ... 
</div> 
<script> 
    $(document).ready(function() { 
     $('.list').click(function() { 
      $(this).find('.list-wrapper').slideDown('slow'); 
     }); 
    }); 
</script> 

Answer 2

本当に簡単なもの：

HTML

<div class="list"> Click me! 
<div class="line">One</div> 
<div class="line">Two</div> 
<div class="line">Three</div> 
<div class="line">Four</div> 
<div class="line">Five</div> 
<div class="line">Six</div> 
<div class="line">Seven</div> 
</div>​ 

CSS

.list{ 
border: 1px solid; 
height: 20px; 
width: 100px; 
} 

.line 
{ 
display:none; 
}​ 

JS

$(".list").click(function() { 
    $(this).children().slice(0, 5).slideDown("slow"); 
}); 

あなたはすべての彼の子供たちは、その後、0から5までだけスライスし、それらを表示し得るクラスリストでdiv要素をクリックします。 http://jsfiddle.net/mgrcic/YHhDp/とJSビンhttp://jsbin.com/3/omequg/edit?html,css,javascript,live

Answer 3

ダウンとアップいくつかの要素をスライドさせる一つの方法：あなたはここにフィドルだ

などあなたが別のクラスまたはものを持つ子どもを持っている場合は、非表示に興味がない、さらにこれを変更することができます：

function rollOut(count, time, justVisible) { 
    justVisible = justVisible !== undefined ? justVisible : true; 
    $(".list > .line").each(function(a, e) { 
     e = $(e); 
     if (a < count) { 
      console.log(a, e); 
      if (e.is(":visible") || e.attr("data-was-visible") == "true") e.attr("data-extend", true); 
      else if (!justVisible) count++; 
     } 
     console.log(count); 
    }); 
    $(".list").children(".line[data-extend=true]").slideDown(time); 
} 

function rollUp(time) { 
    $(".list > .line").each(function(a, e) { 
     var e = $(e); 
     e.attr("data-was-visible", e.is(":visible")); 
    }); 
    $(".list").children(".line").slideUp(time, function() { 
     $(".list > .line").attr("data-extend", false); 
    }); 
} 

そして、ここでフィドルです：（私の前のポスターのHTMLで）http://jsfiddle.net/WbTjK/