JQuery ottiene tutti gli elementi in base al nome della classe

durante il processo di apprendimento di javscript e jquery, ha sfogliato pagine di google ma sembra che non riesca a farlo funzionare. Fondamentalmente sto cercando di raccogliere innerhtml di classi, jquery sembra essere suggerito di un semplice javascript, in un document.write.JQuery ottiene tutti gli elementi in base al nome della classe

Ecco il codice fino ad ora;

<div class="mbox">Block One</div> 
<div class="mbox">Block Two</div> 
<div class="mbox">Block Three</div> 
<div class="mbox">Block Four</div> 

<script> 
var mvar = $('.mbox').html(); 
document.write(mvar); 
</script>

Con questo, solo la prima classe mostra in document.write. Come posso mostrare tutto insieme come Block OneBlock TwoBlock Three? Il mio obiettivo finale è mostrare una virgola separata come Block One, Block Two, Block Three, Block Four. Grazie, vengono visualizzate molte domande pertinenti, ma nessuna sembra essere così semplice.

fonte

2013-05-19 Jake

usando 'non è raccomandato document.write'. –

Un modo possibile è quello di utilizzare il metodo .map():

var all = $(".mbox").map(function() { 
    return this.innerHTML; 
}).get(); 

console.log(all.join());

DEMO:http://jsfiddle.net/Y4bHh/

N.B. Si prega di non utilizzare document.write. A scopo di test console.log è il modo migliore per andare.

fonte

2013-05-19 00:08:01 VisioN

Forse non così pulito o efficiente come le soluzioni già pubblicate, ma per quanto riguarda la funzione .each()? Per esempio:

var mvar = ""; 
$(".mbox").each(function() { 
    console.log($(this).html()); 
    mvar += $(this).html(); 
}); 
console.log(mvar);

fonte

2013-05-19 00:14:01 kufudo

Direi che questa è la risposta canonica (e il caso d'uso previsto di 'each') – Samveen

soluzione alternativa (è possibile sostituire createElement con un proprio elemento)

var mvar = $('.mbox').wrapAll(document.createElement('div')).closest('div').text(); 
console.log(mvar);

fonte

2013-05-19 00:19:06 Sam

Stai ottenendo soltanto la prima delle quattro voci restituite da quel selettore.

codice di seguito come un violino: http://jsfiddle.net/7pUa3/

voglio essere eccessivamente chiaro che si hanno quattro elementi che corrispondeva a quella di selezione, quindi è necessario per affrontare ogni modo esplicito. L'utilizzo di eq() è un po 'più esplicito rispetto a quello delle risposte usando map, sebbene map o each sia quello che probabilmente useresti "nella vita reale" (jquery docs for eq here).

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
    </head> 

    <body> 
     <div class="mbox">Block One</div> 
     <div class="mbox">Block Two</div> 
     <div class="mbox">Block Three</div> 
     <div class="mbox">Block Four</div> 

     <div id="outige"></div> 
     <script> 
      // using the $ prefix to use the "jQuery wrapped var" convention 
      var i, $mvar = $('.mbox'); 

      // convenience method to display unprocessed html on the same page 
      function logit(string) 
      { 
       var text = document.createTextNode(string); 
       $('#outige').append(text); 
       $('#outige').append("<br>"); 
      } 

      logit($mvar.length); 

      for (i=0; i<$mvar.length; i++) { 
       logit($mvar.eq(i).html()); 
      } 
     </script> 
    </body> 

</html>

uscita da logit chiamate (dopo la visualizzazione iniziale s' quattro div):

4 
Block One 
Block Two 
Block Three 
Block Four

fonte

2013-05-19 00:31:13 ruffin

JQuery ottiene tutti gli elementi in base al nome della classe

risposta

Problemi correlati