Перемещение элементов в JQuery

445

05 февраля 2017, 13:36

Помогите со скриптом:
Есть 2 таблицы с разными классами(desktop-table и mobile-table), но ячейки имеют одинаковые классы. Реализовано так:

$('.price-table.desktop-table td').each(function(key, value){
        $(this).attr('class', 'cell-blok-'+key);  
});   
$('.price-table.mobile-table td').each(function(key, value){
    $(this).attr('class', 'cell-blok-'+key); });

Каким образом можно в JQuery переместить весь вложенный контекст между ними?

Answer 1

Смотря, что под этим(вложенным контекстом) понимать. Если присвоение аттрибутов, классов и прочего, то лучше наверное вынести в функцию отдельную:

jQuery.fn.extend({
    fillData: function(mode = 'desktop'){
        /*
            Здесь будет общая часть и для мобильных, и для десктопных
        */
        $(this).attr('class', 'cell-blok-'+key); //например
        if(mode == 'desktop'){
            $(this).toggleClass('desktop');//для десктопа
            return this;
        }
        /*
            Здесь будет обработка мобильного контента
        */
        return this;//возвращаем себя, чтобы можно было использовать chain-function
    }
})
$('.price-table').each(function(){
    var mode = $(this).hasClass('mobile-table');//Проверяем в какой мы таблице
    mode = mode ? 'mobile' : 'desktop';//тернарный оператор на проверку и присвоение значения mode
    $(this).find('td').each(function(){
        $(this).fillData(mode);//заполнение аттрибутов ячейки
    })
})