提取＆amp;从jQuery集合中操作对象

Question

我正在使用jQuery创建一个典型的列表项集合，如下所示：

HTML

<ul id="slides">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <li>Slide 4</li>
</ul>

的jQuery

var $slides = $('#slides li');

我想做的就是识别，例如集合中当前可见的幻灯片，然后从该幻灯片转换到下一个幻灯片。

我认为以下内容将 Just Work™，而不是对象引用，$current变量保存目标幻灯片标记的字符串文字：

的jQuery

var $current = $slides[0];
    console.log($current); // returns "<li>Slide 1</li>" and not [object]

我不明白我在这里做错了什么。

我希望上面给我一个对我在集合中选择的对象的唯一引用，但是我不明白为什么jQuery在这里没有这样工作并且决定给我一个字符串。

Answer 1

尝试

$(function()
{
    var $slides = $('#slides li');
    var $current = $($slides[0]);
    console.log($current); 
});

$('#slides li')和$('#slides')之间的差异首先选择所有li object，而第二个选择整个ul#slides为object所以您无法首先li作为$slides[0]访问，因为它始终会返回ul object。

Answer 2

是对元素的引用。但是，您在控制台中看到的是该元素的依赖于浏览器的字符串表示形式 - 在本例中为outerHTML。

查看this jsFiddle demo的控制台输出。

Answer 3

尝试这样做：

 var $slides = $('#slides li');
 var $current = $slides[0];

你可以像这样操纵当前幻灯片，例如：

 $($current).fadeOut();

编辑：刚刚看到Dipesh Parmar回答，你也可以这样做;）

只是不要忘记你在哪里工作的是字符串，如果你需要jquery来使用该字符串，因为它是一个对象放在$（）