在学习 javscript 和 jquery 的过程中，浏览了谷歌的页面，但似乎无法正常工作。基本上我试图收集类的innerhtml，jquery 似乎比普通的javascript 被建议到一个document.write 中。
这是到目前为止的代码；
<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>
这样，只有第一类显示在 document.write 下。我怎样才能像 Block OneBlock TwoBlock Three 一样将它们全部展示出来？我的最终目标是显示它们以逗号分隔，如第一块、第二块、第三块、第四块。谢谢，出现了一堆相关问题，但似乎没有一个如此简单。
一种可能的方法是使用.map()方法：
var all = $(".mbox").map(function() {
return this.innerHTML;
}).get();
console.log(all.join());
演示：http: //jsfiddle.net/Y4bHh/
注意请不要使用document.write. 出于测试目的console.log是最好的方法。
也许不像已经发布的解决方案那样干净或高效，但是 .each() 函数呢？例如：
var mvar = "";
$(".mbox").each(function() {
console.log($(this).html());
mvar += $(this).html();
});
console.log(mvar);
使用问题中的代码，您只需要与该选择器返回的四个条目中的第一个进行交互。
下面的代码作为小提琴：https ://jsfiddle.net/c4nhpqgb/
我想非常清楚您有四个与该选择器匹配的项目，因此您需要明确处理每个项目。Usingeq()比 using 的答案更明确地说明这一点map，map或者each是你可能在“现实生活中”使用的东西（jquery docs for eqhere）。
<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>
调用的输出logit（在最初的四个div显示之后）：
4
Block One
Block Two
Block Three
Block Four
替代解决方案（您可以将 createElement 替换为您自己的元素）
var mvar = $('.mbox').wrapAll(document.createElement('div')).closest('div').text();
console.log(mvar);
要获取输入值，您可以执行以下操作：
var allvendorsList = $('.vendors').map(function () {
return this.value;
}).get();