Question

I have an object which I’m filling with objects containing 2 table rows each. Each “subobject” should be detached from the original table and “dropped” into a new table I’m creating, which should sit in a JQM table-subpage.

May sample contains 1 table with 5 rows, which I want to split into 3 subpages.

This is what I have:

var splitRows, takeAway;

// 3 is calculated by total-rows/rows-per-subpage 
for( i = 0; i < 3; i++ ){

    // my table object ends up looking like this
    // with each loop adding another object with 2 rows
    splitRows = [[tr.even, tr.odd], [tr.even, tr.odd]],

    // here I'm grabing the current object, which should be two rows
    takeAway = splitRows[i];

    // detach and wrap in new page
    newPage = takeAway.detach()
                 .wrap( "<div data-role='page' id='some"+i+"'><div data-role='content'><table id='" + tableId + "'></table></div></div>" )
                 .closest('div:jqmData(role="content")')
                 .prepend('<div data-role="header"><h1>hello</h1></div>')
                 .parent()
                 .appendTo( $.mobile.pageContainer);
    }

Question:
I’m not getting nested pages with a table containing two rows, but a nested page for each row with a table and this row only. Can anyone tell me what I’m doing wrong?

The for loop runs three times, which is correct, the takeAway variable also correctly get 2,2,1 rows, but then something is going wrong…

Edit:
still trying… I think it must be related to slice creating a new object with 2 elements, which each is wrapped and … only each is not specified anywhere… so I would change my question to how to make wrap multiple elements at once?

Answer 1

got it… to wrap multiple elements in one wrap, use wrapAll() instead of simply wrap().