Question

我正在尝试用jquery创建一个动态列表。我所拥有的是ul元素，其中包含链接和子ul元素。像这样：

<div id="new_list"></div>
<ul id="old_list" class="listview">
    <li>
      <a class="list" href="#">List I</a>
      <ul class="sub">
        <li>1</li>
        <li>2</li>
      </ul>
    </li>
    <li>
      <a class="list" href="#">List II</a>
      <ul class="sub">
        <li>1</li>
        <li>2</li>
      </ul>
    </li>
</ul>

我想对这个清单做些什么：

当用户点击任何这些链接时，子ul元素的html（刚刚单击的链接的兄弟）应该被复制到new_list div然后变得可见。这是代码：

$("a.list").each(function() {
    $(this).click(function() {
      var listToShow = $(this).siblings("ul");
      $("#new_list").html(listToShow);
      $("#old_list").hide();
      $("#new_list").show();
      return false;
    });
});

此代码首次适用于所有链接，但当我再次单击同一链接时，会出现一个空列表。

我缺少什么？

感谢。

Answer 1

无论何时调用jQuery选择器，对其执行的操作都会影响选择器返回的所有对象。试试这个。这将使用类<a>将函数绑定到所有当前和未来的list锚标记，而不使用each();

$('a.list').live('click', function() {
  var listToShow = $(this).siblings("ul");
  $("#new_list").html(listToShow);
  $("#old_list").hide();
  $("#new_list").show();
  return false;
});

查看这些链接，了解有关该主题的一些教育

http://api.jquery.com/click/

http://api.jquery.com/bind/

http://api.jquery.com/live/

Answer 2

当您在html中使用DOM元素或jQuery选择时，元素将从之前的位置移除并移动到DOM中的新位置。

如果要将它们复制到该位置，则需要使用.clone：

var listToShow = $(this).siblings("ul").clone();

另请注意，您不需要each调用：处理程序会自动应用于选择中的每个元素。

$("a.list").click(function() {
    var listToShow = $(this).siblings("ul").clone();
    $("#new_list").html(listToShow);
    $("#old_list").hide();
    $("#new_list").show();
    return false;
});

Answer 3

尝试这样的事情。希望这会有所帮助。

 $('#old_list').delegate('a.list', 'click', function() {
     $(this).siblings('ul.sub').clone().appendTo('#new_list');
 });

如果你想移动而不是复制它，请删除.clone（）。

每个jquery的问题

3 个答案: