jQueryを使用してアンカーを削除するか空白のul liに追加する方法

Question

アンにアンを追加したいのですが、別の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

は、それはあなたが軌道に乗るために正確に何の要件があるので、いくつかの便利なヒントと例をいくつ少し不明だ...

$('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(); 
} 
}); 

Answer 2

をそのリーにいくつかのクラス名を与えると、このような何かを行います：

1）$ (aka jQuery)とCSS3セレクタ使用し、要素のjQueryオブジェクトを取得する：を使用し、要素を削除する

var $element = $("CSS3_selector_for_element"); 

2） へ

$element.remove(); 

3）の要素（あなたがそのイベントハンドラを失うことなく、後で戻ってそれを置くことができる、など）を切り離し、detachを使用します。：3210

$element.detach(); 

4）を追加するか、移動要素、append、appendTo、before、insertBefore、after、insertAfter、またはおそらく他のいくつか（detachにあなたはどこか別の場所からそれを移動している場合は、必要はありませんそれが最初）を使用します。

を

$element.appendTo(target); 

または

jquery_object_for_target.append($element); 

アンカーがクリックされたときに別のリストからアンカーを含む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> 

のJavaScriptのjQueryを使用して：

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イベントが最初に、あなたは（HTMLは上記と同じである）特定のリスト内のアンカーを見てdelegateを使用することができたときにここで把握したくない場合は、次の

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