JQuery 通过类名获取所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16630211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery get all elements by class name
提问by Jake
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 的过程中，浏览了 google 的页面，但似乎无法正常工作。基本上我正在尝试收集类的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 一样一起展示它？我的最终目标是向他们展示逗号分隔，如第一块、第二块、第三块、第四块。谢谢，出现了一堆相关问题，但似乎没有一个这么简单。
回答by VisioN
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.logis the best way to go.
注意请不要使用document.write。出于测试目的console.log是最好的方法。
回答by kufudo
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);
回答by ruffin
With the code in the question, you're only dealing interacting with the firstof the four entriesreturned by that selector.
使用问题中的代码，您只需要与该选择器返回的四个条目中的第一个进行交互。
Code below as a fiddle: https://jsfiddle.net/c4nhpqgb/
下面的代码作为小提琴：https: //jsfiddle.net/c4nhpqgb/
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 mapor eachis what you'd probably use "in real life" (jquery docs for eqhere).
我想说的太清楚了，您有四个与该 selector 匹配的项目，因此您需要明确处理每个项目。使用eq()比使用答案更明确地说明这一点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>
Output from logitcalls (after the initial four div's display):
logit调用的输出（在最初的四个div显示之后）：
4
Block One
Block Two
Block Three
Block Four
回答by Sam
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);
