Ошибка jQuery map () в IE7 / 8

Question

У меня есть следующий код jquery:

$('.menubox').children('div').toArray().map(function(n,i){
            return [$(n).children('input').val(),$(n).children('.subs').children('div').toArray().map(function(n,i){ 
                    return [$(n).children('input').val(),$(n).children('.subs').children('div').toArray().map(function(n,i){ 
                            return $(n).children('input').val(); 
                        })];
                })];
        });

Это HTML-код, который нужно добавить:

        <td class="menubox">
        <div class="draggable droppable lvl0">
            <input type="hidden" value="-" />
            LBL1
            <div class="subs"></div>
        </div>
        <div class="draggable droppable lvl0">
            <input type="hidden" value="-" />
            LBL2
            <div class="subs">                  
                <div class="draggable droppable lvl1">
                    <input type="hidden" value="3" />
                    <b>LBL2.1</b><span style="display:block;"><a class="deleteItem">verwijder</a></span>
                    <div class="subs"></div>
                </div>                  

                <div class="draggable droppable lvl1">
                    <input type="hidden" value="6" />
                    <b>LBL2.2</b><span style="display:block;"><a class="deleteItem">verwijder</a></span>
                    <div class="subs"></div>
                </div>                  
            </div>
        </div>
    </td>

В chrome работает нормально, но IE выдает ошибку:

Ошибка: объект не поддерживает это свойство или метод

Когда я удаляю функцию map (), ошибка исчезает. Что я здесь делаю?

Answer 1

Что я тут делаю?

Вызов .toArray() для объекта jQuery. Удалите эти вызовы и добавьте .get() после .map(), если вы хотите получить ванильный массив JS. Обратите внимание, что обратный вызов .map() jQuery принимает index, element, тогда как обратный вызов Array.map принимает element, index, поэтому вам также необходимо поменять имена аргументов.

var results = $('.menubox').children('div').map(function(i, n)
{
    return [
        $(n).children('input').val(),
        $(n).children('.subs').children('div').map(function(i, n)
        {
            return [
                $(n).children('input').val(),
                $(n).children('.subs').children('div').map(function(i, n)
                {
                    return $(n).children('input').val();
                }).get()
            ];
        }).get()
    ];
}).get();

console.log(JSON.stringify(results));
// ["-",[],"-",["3",[],"6",[]]]

Это работает в Chrome, но не в IE, поскольку Chrome поддерживает Array.map(), но (удивление, удивление) IE <9 - нет. </p>

Демо: http://jsfiddle.net/mattball/5KBdA/