Как превратить массив объектов JavaScript в jQuery prependTo

0

В следующем exampmle я устанавливаю массив объектов и сортирую их по ключевому параметру (положению). Затем мне нужно вывести результат - но как? См. Комментарий в коде.

$(document).ready(function () {

    function sortHooks(){

        // add modules
        var modules = [ 
            { module: 'navbar', hook: 'hook-header', position: '2'},
            { module: 'logo', hook: 'hook-header', position: '3'},
            { module: 'description', hook: 'hook-header', position: '1'}
        ];

        // sort by "position" ASC
        function byPosition(a,b) {
            if (a.position < b.position)
                return -1;
            if (a.position > b.position)
                return 1;
            return 0;
        }

        // jQuery function with the given parameters
        /*  for each modules as modules
            for each hook as hook
            do the following:
            $( '#' + module )prependTo( '#' + hook )

            so for the given example it should return
            $('#description')prependTo('hook-header')
            $('#navbar')prependTo('hook-header')
            $('#logo')prependTo('hook-header')

            so they can be executed in that specific order.
            And since we're using "prepend" that will mean
            that the items be placed like this:
            #logo
            #navbar
            #description
        */

        return ???
    }

    // Execute sortHooks function
    sortHooks();
});

Может быть, что-то вроде этого, но я не совсем уверен:

$.each(modules, function(index, value) {
    $( '#' + value.module ).prependTo( '#' + value.hook ));
});

Я также пробовал кучу других вещей, один из них - элементы Hook с insertAfter, но остался в parent - jQuery, который работал отлично, но если позиция была выше, чем у детей внутри родителя, он не знал, что сделать это и вызвать много нежелательного поведения.

  • 1
    Не по теме: вы можете использовать function byPosition(a,b) { return a.position-b.position; }
  • 0
    @Oriol Спасибо за это!
Теги:

2 ответа

1
Лучший ответ

просто используйте обычный цикл

for(var i=0; i<modules.length; i++){
   $( '#' + modules[i].module )prependTo( '#' + modules[i].hook );
}
Поделиться
  • 0
    Это выглядит действительно просто и чисто. Но как вернуть вывод из цикла в функцию? jsfiddle.net/NicotineLL/5HFVY
  • 0
    вернуть какой вывод? нет вывода, вы просто добавляете один элемент к другому
Показать ещё 1 комментарий
1 
function byPosition(a,b) { return a.position-b.position; }
modules.sort(byPosition);
modules.forEach(function(obj){
    $('#'+obj.madule).prependTo('#'+obj.hook);
});
Поделиться
  • 0
    обратите внимание, что, если они не используют shim / polyfill, forEach недоступен в IE <9
  • 0
    Я не фокусируюсь на поддержке IE <9, но все же лучше быть там.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню