JQuery按类名获取所有元素

in the process of learning javscript and jquery, went through pages of google but can't seem to get this working. Basically I'm trying to collect innerhtml of classes, jquery seems to be suggested than plain javascript, into a document.write.

在学习javscript和jquery的过程中，经历了谷歌的网页，但似乎无法让这个工作。基本上我正在尝试收集类的innerhtml，jquery似乎比普通的javascript更好地建议到document.write中。

Here's the code so far;

这是迄今为止的代码;

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

With this, only the first class shows under document.write. How can I show it all together like Block OneBlock TwoBlock Three? My ultimate goal with this is to show them comma seperated like Block One, Block Two, Block Three, Block Four. Thanks, bunch of relevant questions come up but none seem to be this simple.

有了这个，只有第一个类显示在document.write下。我怎么能像Block OneBlock TwoBlock Three一样展示它们？我的最终目标是向他们展示逗号分隔，如Block Four，Block Three，Block Three，Block Four。谢谢，一堆相关的问题出现了，但似乎没有这么简单。

4 个解决方案

#1

One possible way is to use .map() method:

一种可能的方法是使用.map（）方法：

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

console.log(all.join());

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

演示：http：//jsfiddle.net/Y4bHh/

N.B. Please don't use document.write. For testing purposes console.log is the best way to go.

注：请不要使用document.write。出于测试目的，console.log是最好的方法。

#2

Maybe not as clean or efficient as the already posted solutions, but how about the .each() function? E.g:

可能不像已发布的解决方案那样干净或高效，但.each（）函数怎么样？例如：

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

#3

You're only getting the first of the four entries returned by that selector.

您只获得该选择器返回的四个条目中的第一个。

Code below as a fiddle: http://jsfiddle.net/7pUa3/

代码如下：http：//jsfiddle.net/7pUa3/

I want to be overly clear that you have four items that matched that selector, so you need to deal with each explicitly. Using eq() is a little more explicit making this point than the answers using map, though map or each is what you'd probably use "in real life" (jquery docs for eq here).

我想过分清楚你有四个与该选择器匹配的项目，所以你需要明确地处理每个项目。使用eq（）比使用map的答案更明确地说明这一点，尽管map或者每个都是你在现实生活中可能会使用的东西（这里是eq的jquery docs）。

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

Output from logit calls (after the initial four div's display):

logit调用的输出（在最初的四个div显示之后）：

4
Block One
Block Two
Block Three
Block Four

#4

Alternative solution (you can replace createElement with a your own element)

替代解决方案（您可以使用自己的元素替换createElement）

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

#1