Question

在学习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。谢谢，一堆相关的问题出现了，但似乎没有一个这么简单。

Answer 1

一种可能的方法是使用.map()方法：

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

console.log(all.join());

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

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

Answer 2

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

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

Answer 3

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

以下代码作为小提琴：http://jsfiddle.net/7pUa3/

我想过分清楚您有四个与该选择器相匹配的项目，因此您需要明确处理每个项目。使用eq()比使用map的答案更明确地说明这一点，尽管map或each是您在现实生活中可能会使用的“（{ {3}}）。

<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

Answer 4

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

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

Answer 5

要获取输入值，您可以执行以下操作：

 var allvendorsList = $('.vendors').map(function () {
            return this.value;
        }).get();

JQuery按类名获取所有元素

5 个答案: