帮助使用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

回答

相关问题