it-swarm.com.de

JQuery ruft alle Elemente nach Klassennamen ab

beim Erlernen von Javscript und JQuery sind Seiten von Google durchgegangen, aber es scheint, als würde dies nicht funktionieren. Grundsätzlich versuche ich, Innerhtml von Klassen in einer document.write zu sammeln.

Hier ist der Code soweit;

<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 wie Block OneBlock TwoBlock Three zeigen? Mein letztendliches Ziel dabei ist es, ihnen durch Kommas getrennte Zeichen wie Block Eins, Block Zwei, Block Drei, Block Vier zu zeigen. Vielen Dank, viele relevante Fragen, aber keine scheint so einfach zu sein.

48
Jake

Eine Möglichkeit ist die Verwendung der .map() -Methode:

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

console.log(all.join());

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

N.B. Bitte nicht document.write. Zu Testzwecken console.log ist der beste Weg zu gehen.

53
VisioN

Vielleicht nicht so sauber oder effizient wie die bereits veröffentlichten Lösungen, aber wie sieht es mit der Funktion .each () aus? Z.B:

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

Sie erhalten nur den ersten der vier Einträge, die von diesem Selektor zurückgegeben werden.

Code unten als Geige: http://jsfiddle.net/7pUa3/

Ich möchte zu deutlich machen, dass Sie vier Elemente haben, die zu diesem Selektor passen , also müssen Sie sich explizit mit jedem befassen. Die Verwendung von eq() ist etwas expliziter als die Verwendung von map, obwohl Sie in map oder each wahrscheinlich verwenden würden " echtes Leben "( 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>

Ausgabe von logit -Aufrufen (nach den ersten vier div -Anzeigen):

4
Block One
Block Two
Block Three
Block Four
3
ruffin

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);
1
Sam