2014-05-08 18 views
11

Come posso ottenere il terzo e il valore di class="myDivs" utilizzando jQuery?Ottieni il valore medio di una classe utilizzando JQuery

Qui di seguito è il mio codice:

HTML:

<div class="myDivs">Stack</div> 
<div class="myDivs">Over</div> 
<div class="myDivs">Flow</div> 
<div class="myDivs">And</div> 
<div class="myDivs">Exchange</div> 
<div class="myDivs">Question</div> 
<div class="myDivs">Ask</div> 

risposta

9

È possibile utilizzare :eq per ottenere l'elemento in particolari indici.

Live Demo

$('.myDivs:eq(2), .myDivs:eq(3)').each(function(){ 
    alert($(this).text()); 
}); 

utilizzando la combinazione di :gt e :lt vi darà gamma. È utile quando hai molti elementi.

Live Demo

$('.myDivs:gt(1):lt(2)').each(function(){ 
    alert($(this).text()); 
}); 

Modifica Per rendere più dinamico in modo che non si dispone di codificare mezzo è possibile dividere la lunghezza della raccolta elemento e usarlo per punto di partenza, questo renderà funziona indipendentemente dal numero di elementi che hai con la classe myDivs.

Live Demo

mid = Math.floor($('.myDivs').length /2) -2; 
$('.myDivs:gt(' + mid +'):lt(2)').each(function(){ 
    alert($(this).text()); 
}); 
2

loro codice Per indice

var myDivs = $('.myDivs'), 
    third = myDivs.eq(2), 
    fourth = myDivs.eq(3); 

Per ottenere il valore di testo, basta usare text()

2

uso

$("div:nth-child(3)").html(); 
$("div:nth-child(4)").html(); 

tornerà voi il testo del 3 e 4 del testo div Fiddel

6

È possibile utilizzare .slice()

Ridurre l'insieme di elementi abbinati a un sottoinsieme specificato da una serie di indici

e inserire il valore del testo in un array utilizzando .map():

var valArr = $('.myDivs').slice(2,4).map(function() { 
    return this.textContent; 
}).get(); 

Fiddle Demo

5

Un modo dinamico è quello di calcolare per la lunghezza del conte di classe.

var mid1=Math.ceil($('.myDivs').length/2) - 1, 
    mid2=Math.floor($('.myDivs').length/2) - 1; 
if(mid1===mid2){ 
    //handle the case 
} 
$('.myDivs:eq('+mid1+'), .myDivs:eq('+mid2+')').each(function(){ 
    alert($(this).text()); 
}); 

Here is demo

+2

in realtà si sta rispondendo alla domanda reale ... –

0

Se avete intenzione di eseguire la stessa operazione su entrambi al terzo e quarto div, quindi utilizzare il seguente codice:

$('.myDivs:eq(2), .myDivs:eq(3)').each(function(){ 
    // perform your operation here 
}); 

Se si desidera eseguire diversi compiti sia su di loro, quindi

var myDivs = $(".myDivs"), 
    thirdDiv = myDivs[2], 
    fourthDiv = myDivs[3]; 

Ora è possibile associare eventi personalizzati a t tubo particolare immersioni da solo.

ad esempio:

$(thirdDiv).click(function() { 
    // custom function 
}); 
+1

Oh ya! Ma può essere thirdDiv.onclick = function() {} :) – mohamedrias

Problemi correlati