通过Javascript添加和删除li

Question

我有左侧窗格和右侧窗格。我要对付两个场景

1. 当我点击右侧的希望加上左侧的列表（LI）（`最初左侧窗格是空的），并从右侧删除。
2. 第一个的倒序部分。当我点击左侧添加的李，需要从左侧删除并添加到右侧。

我做的第一个场景像下面

<div class="left_pane"> 
    <div class="content_left_pane"> 
    <ul data-role="listview" id="left_side_ul"> 
    </ul> 
    </div> 
</div> 

<div class="right_pane"> 
<ul data-role="listview" id="right_side_ul"> 
    <li class="showDetails" id="account-1" onclick="selected_destination($(this).attr('id'))"> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div> 
     <div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div> 
     <div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div> 
    </div>    
    </li>  
</ul> 
</div> 



<script> 
function selected_destination(id){ 
     $("#right_side_ul li#"+id+"").clone().prependTo("div.content_left_pane ul#left_side_ul"); 
     $("#right_side_ul li#"+id+"").remove(); 
    } 

    </script> 

我没有任何线索做第二部分做的。因为在第一部分中，我在onclick函数中发送当前的li id。但在相反的部分，在左窗格中我只有ul，所以我不知道如何做第二个场景。

Answer 1

我建议你不要直接在html代码中注册onclick处理函数。当你正在使用jQuery，这种情况下应为你工作：

HTML：

<div class="left_pane"> 
    <div class="content_left_pane"> 
    <ul data-role="listview" id="left_side_ul"> 
    </ul> 
    </div> 
</div> 

<div class="right_pane"> 
<ul data-role="listview" id="right_side_ul"> 
    <li class="showDetails" id="account-1"> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div> 
     <div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div> 
     <div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div> 
    </div>    
    </li>  
</ul> 
</div> 

的JavaScript：

$(document).ready(function(){ 
    $('#right_side_ul li').live('click', function(){ 
     $(this).appendTo('#left_side_ul'); 
    }); 

    $('#left_side_ul li').live('click', function(){ 
     $(this).appendTo('#right_side_ul'); 
    }); 
});​ 

请注意，我用live()这里是因为LI元素dinamically添加到UL。

正如你所看到的，对于左，右窗格中的javascript代码几乎是相同的，所以你可以通过它们合并成一个