jquery - 如何删除 anchor 或使用 jQuery 在空白 ul li 中添加它们

Question

我想在 li 中添加一个 anchor ，并想从另一个 li 中删除，但不知道如何完成。有谁知道如何使用 jQuery 实现这一点？

在空白处添加

<li>
<!-- i think to add the anchor here by many attribute --->
</li>

<li>
<!-- this anchor how i can remove -- >
<a></a>
</li>

我想做的逻辑

当事件发生时:-

var cur = cur; // current is variable where i store li who i want to do.

我如何从中删除它们以及如果它们确实没有锚定我如何添加。

Answer 1

具体要求是什么有点不清楚，所以一些方便的提示和几个示例可以帮助您前进:

1) 要获取元素的 jQuery 对象，请使用 $ (aka jQuery)和一个 CSS3 选择器:

var $element = $("CSS3_selector_for_element");

2) 要删除元素，请使用 remove :

$element.remove();

3) 要分离 一个元素(以便稍后可以将其放回去而不会丢失其事件处理程序等)，请使用 detach :

$element.detach();

4) 要添加或移动元素，请使用 append , appendTo , before , insertBefore , after , insertAfter ，或者可能是其他一些(如果您要从其他地方移动它，则无需先分离它):

$element.appendTo(target);

或

jquery_object_for_target.append($element);

当点击 anchor 时，将包含 anchor 的 li 从一个列表移动到另一个列表的非常基本的示例:

HTML:

<ul id='first'>
  <li><a href='#'>Anchor One</a></li>
  <li><a href='#'>Anchor Two</a></li>
  <li><a href='#'>Anchor Three</a></li>
</ul>
<hr>
<ul id='second'>
  <li><a href='#'>Anchor Four</a></li>
  <li><a href='#'>Anchor Five</a></li>
  <li><a href='#'>Anchor Six</a></li>
</ul>

使用 jQuery 的 JavaScript:

jQuery(function($) {

  $("a").click(function() {
    var $this, li, list, target;

    $this = $(this);
    li = $this.closest('li');
    list = li.closest('ul');
    target = list[0].id == 'first' ? '#second' : '#first';
    $(target).append(li);

    return false;
  });

});​

Live copy

如果您不想弄清楚 li 在事件开始时的位置，您可以使用 delegate 来查看特定列表中的 anchor (HTML 是同上):

jQuery(function($) {

  $("#first").delegate('a', 'click', function() {
    return moveContainingListItemTo(this, '#second');
  });
  $("#second").delegate('a', 'click', function() {
    return moveContainingListItemTo(this, '#first');
  });

  function moveContainingListItemTo(element, target) {

    $(element).closest('li').appendTo(target);

    return false;
  }

});​

Live copy