Come mostrare il primo n numero di elementi in jQuery?

Question

Ho una pagina che ha 50 elementi con la stessa classe "campi" che sono tutti di visualizzazione nessuno al momento

<div class="fields" style="display:none;"> 
    ... 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
... 

Come mostro solo i primi 3 o qualunque numero. Inoltre, contali con un conteggio in cima come nell'esempio seguente.

Così, per esempio, se ho bisogno la prima 3 questo è quello che ho bisogno del div a guardare come

<div class="fields"> 
    <h1>Station 1</h1> 
</div> 
<div class="fields"> 
    <h1>Station 2</h1> 

</div> 
<div class="fields"> 
    <h1>Station 3</h1> 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
... 

Quindi, in pratica solo alcuni il numero di div che ho bisogno ... ho già il numero di elementi che ho bisogno di mostrare in questa dichiarazione di sfocatura nella variabile station_count. Si noti inoltre ho bisogno di un tag span con le idee count..any su come fare questo

$("#number_station").blur(function(){ 
     var station_count = $(this).val(); 
        //code goes there 
    }); 

Answer 1

Come mostro solo il primo numero 3 o qualsiasi altra cosa.

$('div.fields:lt(3)').show(); 

Inoltre contarli con un conteggio in cima

$('div.fields:lt(3)').each(function (index) 
{ 
    $('<h1></h1>', {text: 'Station ' + index}).prependTo(this); 
}).show(); 

Demo: http://jsfiddle.net/mattball/TssUB/

---

leggere la documentazione API di jQuery per le domande di base in questo modo:

• :lt() selector
• .prependTo()
• jQuery() (per la creazione di nuovi elementi)

Answer 2

Con

$(".fields").each(function() { 
     //do whatever like count then show/hide 

    }); 

è possibile scorrere i div nascosti. Quindi con una variabile semplice puoi iniziare/interrompere quando ti serve.

Answer 3

Mentre le altre risposte funzioneranno, ho scoperto e adoro il metodo jQuery slice().

$(".fields").slice(0, 3).each(function(index) { 
    // Do whatever you want to the first three elements 
}