JQuery ruft alle Elemente nach Klassennamen ab

Question 1

Beim Lernen von Javascript und Jquery bin ich durch Seiten von Google gegangen, kann das aber anscheinend nicht zum Laufen bringen. Grundsätzlich versuche ich, inneres HTML von Klassen zu sammeln, Jquery scheint als einfaches Javascript vorgeschlagen zu werden, in einer document.write.

Hier ist der bisherige Code;

<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>

Damit wird nur die erste Klasse unter document.write angezeigt. Wie kann ich alles zusammen zeigen wie Block OneBlock TwoBlock Three? Mein ultimatives Ziel dabei ist es, sie durch Kommas getrennt zu zeigen, wie Block Eins, Block Zwei, Block Drei, Block Vier. Danke, es tauchen viele relevante Fragen auf, aber keine scheint so einfach zu sein.

Question 2

Ein möglicher Weg ist die Verwendung .map() Methode:

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

console.log(all.join());

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

NB Bitte nicht verwenden document.write. Zu Testzwecken console.log ist der beste Weg zu gehen.

Question 3

Vielleicht nicht so sauber oder effizient wie die bereits geposteten Lösungen, aber wie wäre es mit der Funktion .each()? Z.B:

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

Question 4

Mit dem Code in der Frage sind Sie nur Umgang mit der Interaktion mit dem ersten des vier Einträge von diesem Selektor zurückgegeben.

Code unten als Geige: https://jsfiddle.net/c4nhpqgb/

Ich möchte das überdeutlich machen Sie haben vier Elemente, die mit diesem Selektor übereinstimmen, also müssen Sie sich mit jedem explizit befassen. Verwenden eq() macht diesen Punkt etwas deutlicher als die Antworten mit mapobwohl map oder each ist das, was Sie wahrscheinlich “im wirklichen Leben” verwenden würden (jquery-Dokumente für eq hier).

<html>
    <head>
        <script src="https://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>

Ausgabe von logit Anrufe (nach den ersten vier divAnzeige von ):

4
Block One
Block Two
Block Three
Block Four

Question 5

Alternative Lösung (Sie können createElement durch ein eigenes Element ersetzen)

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

Question 6

Um den Eingabewert zu erhalten, können Sie Folgendes tun:

 var allvendorsList = $('.vendors').map(function () {
            return this.value;
        }).get();