Jak*_*ake 50 javascript jquery
在学习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一样展示它们？我的最终目标是向他们展示逗号分隔,如Block Four,Block Two,Block Three,Block Four.谢谢,一堆相关的问题出现了,但似乎没有这么简单.
Vis*_*ioN 57
一种可能的方法是使用.map()方法:
var all = $(".mbox").map(function() {
return this.innerHTML;
}).get();
console.log(all.join());
演示: http ://jsfiddle.net/Y4bHh/
NB请不要使用document.write.出于测试目的,这console.log是最好的方法.
kuf*_*udo 41
也许不像已经发布的解决方案那样干净或高效,但是.each()函数怎么样？例如:
var mvar = "";
$(".mbox").each(function() {
console.log($(this).html());
mvar += $(this).html();
});
console.log(mvar);
使用问题中的代码，您只需要与该选择器返回的四个条目中的第一个进行交互。
下面的代码作为小提琴：https : //jsfiddle.net/c4nhpqgb/
我想说的太清楚了，您有四个与该 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>
logit调用的输出（在最初的四个div显示之后）：
4
Block One
Block Two
Block Three
Block Four
| 归档时间： |
|
| 查看次数： |
115118 次 |
| 最近记录： |