Question

I’m a newbie trying to learn how to build a jQuery Mobile App and I have a list of items that I want to shuffle around to different lists on different pages. I’ve been able to figure out how to remove one using

$('document').ready(function() {
    $('.theListItem .red').click(function() {
        var $toRemove = $(this).closest('div[data-theme="a"]')

        $toRemove.animate({
            height: 0
        }, 500, function() {
            // This is the callback.
            $toRemove.remove();
        });

        return false;
    });
});

But if I want to move a whole item like

<div data-role="collapsible" data-collapsed="false" data-theme="a">
    <h3>Section 1</h3>
<div data-role="controlgroup"  data-type="horizontal">
<a href="categorize.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

to a different list with the exact same functionality, how would u recommend I do that? Thanks so much.

Answer 1

I think the best approach would be draw your lists from JavaScript objects dynamically. Specifically, if you had two lists A and B, you might have an array of strings representing each list. Each time you move an item between lists you just carry out the operation on the two arrays then redraw your lists from those arrays.

I hope this helps!