JQuery получает все элементы по имени класса

в процессе обучения javscript и jquery, прошел через страницы Google, но не может показаться, что это работает. В основном я пытаюсь собрать 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? Моя конечная цель в этом состоит в том, чтобы показать им запятую, разделенную как Блок Один, Блок Два, Блок Три, Блок Четыре. Спасибо, куча релевантных вопросов, но никто не кажется таким простым.

Ответ 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 - лучший способ пойти.

Ответ 2

Может быть, не так чисто или эффективно, как уже размещенные решения, но как насчет функции .each()? Например:

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

Ответ 3

Вы получаете только первую из четырех записей, возвращаемых этим селектором.

Код ниже как скрипка: http://jsfiddle.net/7pUa3/

Я хочу быть предельно ясным, что у вас есть четыре элемента, которые соответствуют этому селектору, поэтому вам нужно иметь дело с каждым явно. Использование eq() является более явным, делая это, чем ответы, используя map, хотя map или each - это то, что вы, вероятно, используете "в реальной жизни" (jquery docs для eq здесь).

<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

Ответ 4

Альтернативное решение (вы можете заменить createElement своим собственным элементом)

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