75

javascript と jquery を学習する過程で、Google のページを調べましたが、これを機能させることができないようです。基本的に私はクラスのinnerhtmlを集めようとしています.jqueryはプレーンなjavascriptよりもドキュメント.書き込みに提案されているようです.

ここまでのコードは次のとおりです。

<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 のようにすべてを一緒に表示するにはどうすればよいですか? これに関する私の最終的な目標は、ブロック 1、ブロック 2、ブロック 3、ブロック 4 のようにカンマ区切りで表示することです。ありがとう、関連する質問がたくさん出てきますが、これほど単純なものはないようです。

4

5 に答える 5

91

.map()考えられる方法の 1 つは、メソッドを使用することです。

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

console.log(all.join());

デモ: http://jsfiddle.net/Y4bHh/

注意使用しないでくださいdocument.write。テスト目的の場合console.logは、最善の方法です。

于 2013-05-19T00:08:01.123 に答える
66

すでに投稿されたソリューションほどクリーンでも効率的でもないかもしれませんが、.each() 関数はどうですか? 例えば：

var mvar = "";
$(".mbox").each(function() {
    console.log($(this).html());
    mvar += $(this).html();
});
console.log(mvar);
于 2013-05-19T00:14:01.450 に答える
6

問題のコードでは、そのセレクターによって返された4 つのエントリの最初の操作のみを扱っています。

以下のフィドルとしてのコード: https://jsfiddle.net/c4nhpqgb/

その selector に一致する 4 つの項目があることを明確にしたいので、それぞれを明示的に処理する必要があります。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(最初の 4divの表示の後):

4
Block One
Block Two
Block Three
Block Four
于 2013-05-19T00:31:13.317 に答える
2

代替ソリューション (createElement を独自の要素に置き換えることができます)

var mvar = $('.mbox').wrapAll(document.createElement('div')).closest('div').text();
console.log(mvar);
于 2013-05-19T00:19:06.750 に答える