Jquery Mobile Column Переключить кнопку добавления, когда несколько таблиц на одной странице

Question

У меня проблема с веб-приложением jquery mobile 1.4.2. У меня есть страница с 2 таблицами, в обеих из которых используется кнопка переключения столбцов. Я хочу переместить каждую из этих кнопок в их собственный заполнитель, чтобы обеспечить горизонтальную прокрутку.

У меня это работает, когда есть одна таблица, но я не могу понять, как указать идентификатор таблицы для кнопки переключения столбца, чтобы переместить кнопку для правильной таблицы.

<div id="colUnit"></div>

$(document).on("pageinit", "#contractDetails", function () {
   $(".ui-table-columntoggle-btn").appendTo("#colUnit");
}); 

Есть ли способ указать идентификатор таблицы в JQuery так, чтобы правильная кнопка была перемещена в <div id="colUnit"></div>

В настоящее время он размещает ОБА кнопки (по одной от каждой таблицы), в <div id="colUnit"></div>

Answer 1

Кнопки-переключатели столбцов являются родственными элементами таблиц и расположены перед ними. использование .prev() переехать в другое место.

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .appendTo("#colUnit");

---

Обновить

Вы также можете добавить их в контрольную группу и изменить их текст.

<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>

Переместите кнопки для управления группой.

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .each(function () {
    var text = $.mobile.path.parseUrl($(this)
        .prop("href"))
        .hash.substring(1);
    $(this)
        .text(text.split("-")[0])
        .appendTo($("#colUnit")
        .controlgroup("container"));
});

$("#colUnit").controlgroup("refresh");

демонстрация