如何让 jQuery 找到第一个列表项，而不是所有列表项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2524828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get jQuery to find the first list-item, rather than all list-items?
提问by David says reinstate Monica
I'm trying to implement a basic jQuery infinite carousel. As much for the learning process as for anything else (as a rule I'm not a fan of re-inventing wheels, but...I have to learn somehow, might as well start with the basics).
我正在尝试实现一个基本的 jQuery 无限轮播。对于学习过程和其他任何事情一样（通常我不喜欢重新发明轮子，但是......我必须以某种方式学习，不妨从基础开始）。
I've managed to get the list to animate left happily enough, but I'm stuck when it comes to selecting the first element of the list. I've tried to use:
我已经成功地让列表动画离开了，但在选择列表的第一个元素时我被卡住了。我试过使用：
$('ul#services > li:first');
$('ul#services > li:first-child');
$('ul#services > li').eq([0]);
(xhtml below),
(xhtml 下面),
In each case a console.log(first)(the varname used) returns all of the list-items. Am I doing something blatantly, and obviously, wrong?
在每种情况下，a console.log(first)（使用的var名称）返回所有列表项。我是不是在公然地做某事，而且显然是错误的？
The eventual plan is to clone the first li, append it to the parent ul, remove the lifrom the list and allow the list to scroll infinitely. It's just a list of services rather than links so I'm not -at the moment- planning to have scroll or left/right functionality.
最终的计划是克隆第一个li，将其附加到父ul，li从列表中删除并允许列表无限滚动。它只是一个服务列表而不是链接，所以我目前不打算使用滚动或左/右功能。
Current xhtml:
当前 xhtml：
(edited to add the entirety of the current code/html)
（编辑以添加整个当前代码/html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<style type="text/css" media="screen">
ul#services {overflow: visible; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(document).ready(function() {
$('h1 > span.businessName').each(
function() {
var text = $(this).html();
var first_letter = text.substr(0,1);
if ( /[a-zA-Z]/.test(first_letter) ) {
$(this).html('<span class="firstLetter">' + first_letter + '</span>' + text.slice(1));
}
}
);
});
$('ul#services > li').filter(':odd').addClass('odd');
$('ul#services > li').filter(':visible:last').addClass('last');
//--> Function starts
jQuery.fn.carousel = function() {
// 1. find the width of the list items:
var listWidth = $('ul#services > li').outerWidth();
// 2a. find the current first item:
var curFirst = $('ul#services > li').first();
console.log(curFirst);
// 2b. append the current first item:
// 2c. remove the first item
// 3. animate the list, to move left by listWidth:
$('ul#services > li').delay(500).css('position','relative').animate(
{
left: '-=' + listWidth
},
5000,
function() {
// $('ul#services').get(0).remove();
$('ul#services').delay(500).carousel()
}
);
};
//--> Function ends.
$('ul#services').carousel();
}
)
</script>
</head>
<body>
<div id="pageWrap">
<div id="branding">
<h1><span class="businessName">business name</span> <span class="tagline">some other info</span></h1>
<hr id="rule">
</div>
<div id="content">
<div class="carousel">
<div class="wrapper">
<ul id="services">
<li>one</li
><li>two</li
><li>three</li
><li>four</li
><li>five</li
><li>six</li
><li>seven</li
><li>eight</li
><li>nine</li
><li>ten</li>
</ul>
</div>
</div>
<div id="mainPane">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="sidebar">
<div id="contact">
<!--
STARTS hCARD (below)
-->
<div id="hcard">
<div id="hcard-yy-xx" class="vcard">
<span class="fn"><span class="given-name">YY</span> <span class="family-name">XX</span></span>
<div class="org">business name</div>
<a class="email" href="mailto:[email protected]">email</a>
<div class="tel">
</div>
<a class="downloadAs" href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http://www.davidrhysthomas.co.uk/arch/tester.html">Download contact information</a>
</div>
</div>
<!--
ENDS hCARD (above)
-->
</div>
<div id="professionalBodies">
<ul>
<li>some stuff</li>
</ul>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Updated, in response to Nick Craver's answer:
更新，回应 Nick Craver 的回答：
...I believe you want:
$('ul#services li:first').remove();...What you probably want there is something like$('ul#services > li:first').delay(500)...
......我相信你想要：
$('ul#services li:first').remove();......你可能想要的东西就像$('ul#services > li:first').delay(500)...
Using $('ul#services li:first').remove();generates the error:
使用会$('ul#services li:first').remove();产生错误：
Uncaught TypeError: Object # has no method 'remove'
未捕获的类型错误：对象 # 没有方法“删除”
and there seems to be no difference in behaviour from using $('ul#services > li:first').delay(500)...
并且在行为上似乎与使用没有区别 $('ul#services > li:first').delay(500)...
回答by Nick Craver
Since you're learning it, I won't do all the corrections here, but here are the main points:
既然你正在学习它，我不会在这里做所有的更正，但这里是要点：
This is erroring: $('ul#services').get(0).remove();
I believe you want: $('ul#services li:first').remove();
这是错误的：$('ul#services').get(0).remove();
我相信你想要：$('ul#services li:first').remove();
This is the main reason for what you're seeing: $('ul#services > li').delay(500)...This starts the animation on eachof the child <li>and what you see is 10 console.log because you're kicking off carousel 10 times, 1 for each <li>.
这是您看到的主要原因：$('ul#services > li').delay(500)...这会在每个孩子<li>身上启动动画，您看到的是 10 console.log 因为您启动了 10 次轮播，每个 1 次<li>。
What you probably want there is something like $('ul#services > li:first').delay(500)...
你可能想要的是 $('ul#services > li:first').delay(500)...
All of that make sense? I'm not exactly sure what you want the end result to be, just trying to explain your current behavior.
所有这些都有意义吗？我不确定你想要的最终结果是什么，只是试图解释你目前的行为。
回答by Alex
http://api.jquery.com/first-selector/
http://api.jquery.com/first-selector/
$('ul#services li:first)
is correct, your problem must be elsewhere, try .first()?
是正确的，你的问题一定在别处，试试.first()？
