如何使用 jQuery 删除锚点或将它们添加到空白 ul li答案

【问题标题】：how to remove anchor or add them in blank ul li using jQuery如何使用 jQuery 删除锚点或将它们添加到空白 ul li
【发布时间】：2011-02-03 10:21:53
【问题描述】：

我想在 li 中添加一个锚点，并想从另一个 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.

我如何将它们从中删除，以及如果它们真的没有锚定它们，我该如何添加。

【问题讨论】：

什么时候触发？你也可以提供一些html然后解释类似于你的html的问题
@Kyle Sevenoaks - 你有什么理由在我做完这个问题后直接改写了这个问题？奇怪的人……
@Neurofluxation，我不知道你也编辑了！对不起，你的更好吗？我看到有一些 HTML 没有显示，并试图使问题易于理解。
@Kyle - 不用担心，好的 ol' ping 问题是吗？不过你是对的 - 代码很乱 :) 我只是改写了英文
我喜欢来自@kyle 的代码和来自@neuro 的英语......真是两难选择。 ;-)

标签： jquery html css logic

【解决方案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 或其他几个元素（如果您要从其他地方，不需要先detach它）：

$element.appendTo(target);

或

jquery_object_for_target.append($element);

单击锚点时将包含锚点的lis 从一个列表移动到另一个列表的非常基本的示例：

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 来查看特定列表中的锚点（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

【讨论】：

【解决方案2】：

给那个 li 一些类名，然后做这样的事情......

$('li ').live('click', function () {

 if(!jQuery("li').hasClass('selected')){

            jQuery(this).addClass('selected').append('<a id="anchor">blah...</a>')
    }else{
             jQuery(this).removeClass('selected').find('a').remove();
}
});

【讨论】：