Question

I have two tabs:

• In first tab I have a fixed list of items. Each item can be added to the other tab.
• The second tab contains a custom list of items, originating from the first tab.
• The second tab should only have items with unique IDs
• It should not be possible to add the same item from tab1 to tab2 more than once.

The adding and removing mechanism works but the check that is made to see if an item has already been added to tab2 is not working. For now I’ve only alerted if the item is there or not.

If the check is made in the other direction, checking if an item exists in tab1 seems to be working fine which seems strange to me.

Can someone please suggest improvements to my code ?

EDIT:
The problem is that the check that is done always returns “No”. It needs improvements and I’m out of ideas.

HTML:

<div class="demo">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Bands</a></li>
            <li><a href="#tabs-2">My bands</a></li>
        </ul>
        <div id="tabs-1">
            <ul id="sortable1" class="bandList">

                <li id="6" class="band">
                    <div class="text">Band 1</div>
                    <div class="actions">
                        <a href="#" class="add">Add</a>
                        <a href="#" class="remove">Remove</a>
                    </div>
                </li>

            </ul>
        </div>
        <div id="tabs-2">
            <ul id="sortable2" class="bandList">

                <li id="9" class="band">
                    <div class="text">Band 2</div>
                    <div class="actions">
                        <a href="#" class="add">Add</a>
                        <a href="#" class="remove">Remove</a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>

CSS:

.band .actions a.add{
    background:url("../img/edit.png") no-repeat center center;
}

.band .actions a.remove{
    background:url("../img/delete.png") no-repeat center center;
}

JQuery:

// Listening for a click on an add button
$('.band a.add').live('click',function(){
    var cur_id = $(this).parent().parent().attr("id");

    var tmp = ($('#sortable2').has('#' + cur_id).length ? "Yes" : "No")
    alert(tmp);

    $('#sortable2').append($('#'+cur_id).clone());
});


// Listening for a click on a delete button (original)
$('.band a.remove').live('click',function(){
    var cur_id = $(this).parent().parent().attr("id");

    $('#sortable2 > li').remove('#' + cur_id);
});

Answer 1

This line:

($('#sortable2').has('#' + cur_id).length ? "Yes" : "No");

always returns "No". If you return length it will always return Yes. I couldnt get it to work with has, but it was returning correct result with children (I think). It will travel only one level though.