如何将列表项从一个列表移动到另一个列表？答案

【问题标题】：How can I move a list item from one list to another?如何将列表项从一个列表移动到另一个列表？
【发布时间】：2013-01-12 11:05:11
【问题描述】：

我正在使用 jQuery Mobile，一旦我单击此列表中的链接：

<div id="scroller">
    <div class="trans">
        <ul id="thelist" data-corners= "false" data-role="listview">
             <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
                 <li><a class= "left" data-inset="true" data-transition="pop" href="YesNoMaybe.html"><h4>Think Coffee</h4><h3>$3.50</h3></a></li>
                 <li><a class= "left" data-inset="true" data-transition="pop" href="YesNoMaybe.html"><h4>Think Coffeadsf dsadsf ads faf adsf adsf adsf sadf asdf adsfadsfadsfadsfadsf sadfasdfe</h4><h3>$3.50</h3></a></li>
                 <li><a class= "left" data-inset="true" data-transition="pop" href="YesNoMaybe.html"><h4>sup Coffee</h4><h3>$3.50</h3></a></li>
             </div>
         </ul>
    </div>
</div>

如果 <h4> 和 <h3> 文本替换此列表中的文本，我会很高兴：

<ul id="thelist" data-corners= "false" data-role="listview">
    <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
        <li class="purchase" ><a data-inset="true"  href="#"><h4>Think Coffee</h4><h3>$3.50</h3></a></li>               
    </div>
</ul>

我试过这个：

$('#transPage').live('pageinit', function() {
$('a').click(function(){
    var $move = $(this).closest('li').appendTo("#YesNoMaybePage .theListItem");
  });
});

而且一无所获。这些列表位于不同的页面上。所有建议都非常受欢迎。感谢世界。我欠你很多。

【问题讨论】：

您必须先将其从 DOM 中删除；所以像...closest('li').remove().appendTo...
并使用 .on 而不是 .live
$('#transPage') 或 $('#trans')?
它是#transPage。整个页面都包含在该 ID 中。你可以忽略列表中的.trans。那是另一回事。谢谢大家。
如果他不想remove()这个DOM对象，他可以clone()它。为什么你有var $move却不使用它。

标签： jquery listview jquery-mobile

【解决方案1】：

尝试这些方法。

$('#transPage').on('pageinit', function() {
  $('a').click(function(){
    var $h4 = $(this).find('h4').text(); // select the text of h4
    $('.purchase h4').text($h4);         // insert the text in the target

    var $h3 = $(this).find('h3').text();
    $('.purchase h3').text($h3);
  });
});

我在 jsFiddle 上对其进行了测试，并且可以正常工作。 http://jsfiddle.net/3JWFJ/

【讨论】：

谢谢！这很好用。我唯一的问题是，它仅在我刷新第二页 #YesNoMaybePage 时有效，而在我刷新 #transPage 时无效。知道为什么吗？
给出的代码 sn-ps，我不能说我有。对不起。您可以尝试使用 console.log() 或 alert() 来查看脚本是否按预期触发。