幫助使用jQuery

從列表中刪除元素我有一個列表：幫助使用jQuery

<ul id="links_list" class="links_list"> 

<li id="296" class="sidebar_link">text 
    <a onclick="deleteLink(296)" href="javascript:void(0);">Delete Link</a> 
</li> 

<li id="297" class="sidebar_link">text2 
    <a onclick="deleteLink(297)" href="javascript:void(0);">Delete Link</a> 
</li> 

    ... etc for a long list of items ... 

</ul>

我目前能夠使用該刪除的第一個元素：

function deleteFirst() { 

... do ajax stuff .. 

$('ul.links_list li:first-child').fadeTo("fast", 0.01, function(){ //fade 
    $(this).slideUp("fast", function() { //slide up 
     $(this).remove(); //then remove from the DOM 
    }); 

}); 

}

我怎麼能修改此功能允許我刪除列表中的任何項目嗎？

來源

2010-09-27 Simon

對於任何人在未來找到這個請不要** **不使用公認的答案，'$（「什麼#ID」）'是一個極其低效的選擇，並沒有解決這裏的任何問題。一個ID選擇器應該是* only *'$（「＃ID」）'。 – 2010-09-27 13:23:32

代替$('ul.links_list li:first-child')使用$('ul.links_list li#' + itemID)並通過刪除功能通過ITEMID。

來源

2010-09-27 13:04:47 o15a3d4l11s2

謝謝！這完美的作品！ – Simon 2010-09-27 13:14:54

你不應該使用一個ID選擇器，它應該只是'$（'＃'+ itemID）'。 – 2010-09-27 13:15:09

Nick Craver是對的，如果使用ID，則不需要對選擇器進行如此特定的處理。「 – o15a3d4l11s2 2010-09-27 13:24:32

：第n個孩子選擇

見http://api.jquery.com/nth-child-selector/

例如：

$('ul.links_list li:nth-child(10)')

來源

2010-09-27 13:04:13

我會綁定一次，而不是內聯的所有環節，如：

<ul id="links_list" class="links_list"> 
    <li data-id="296" class="sidebar_link">text 
    <a href="#">Delete Link</a> 
    </li> 
    <li data-id="297" class="sidebar_link">text2 
    <a href="#">Delete Link</a> 
    </li> 
</ul>

那麼這樣的腳本：

$('#links_list li a').click(function(e) { 
    var id = $(this).closest("li").attr("data-id"); 
    //do ajax stuff 
    $(this).closest("li").fadeTo("fast", 0.01).slideUp("fast", function() { 
    $(this).remove(); 
    }); 
    e.preventDefault(); //prevent page scrolling with # href 
});

這解決了幾個問題和一些改進：

身份證不能以數字開頭，除非您使用HTML5
標記要輕得多（你大概可以去除過多的類）
.slideUp()是一個排隊的動畫一樣.fadeTo()，沒有必要使用一個回調是
的ID相對得到，沒有更多行腳本，更容易維護和在另一個文件中

You can test it out here。

來源

2010-09-27 13:07:16

」ID不能以數字開頭，除非你使用的是HTML5「好的，但是你使用'data-id'，這也是HTML5，所以呃......我又說了什麼？沒關係。 – 2010-09-27 13:13:11

@YiJiang - 數據屬性不會干擾HTML4，其中數字ID是明確不允許的。一個是「只是不在規格」另一個是專門禁止:) – 2010-09-27 13:14:40

您可以更改您的HTML以將引用傳遞給被單擊的引用，然後使用該引用。

HTML

<li id="296" class="sidebar_link">text 
    <a onclick="deleteLink(this)" href="javascript:void(0);">Delete Link</a> 
</li> 
<li id="297" class="sidebar_link">text2 
    <a onclick="deleteLink(this)" href="javascript:void(0);">Delete Link</a> 
</li>

的JavaScript

function deleteLink(elem) { 
    $(elem.parentNode).fadeTo("fast", 0.01, function() { //fade 
     $(this).slideUp("fast", function() { //slide up 
      $(this).remove(); //then remove from the DOM 
     }); 
    }); 
}

來源

2010-09-27 13:08:17 user113716

幫助使用jQuery

回答

相關問題