jQuery 冒号选择器答案

【问题标题】：jQuery colon selectorsjQuery 冒号选择器
【发布时间】：2011-10-21 22:21:24
【问题描述】：

在 jQuery 中有一些冒号选择器，例如

:prev, :next, :last

我的问题是：

它们真的是 jQuery 的一部分吗，因为它们实际上用于 DOM 元素？
我们似乎在 jQuery prev()、next()、last() 中也有等效的方法。使用 2 种不同方式的目的是什么？

任何基本的例子都会很棒。

【问题讨论】：

我从来不知道有:prev 或:next 选择器。
我知道:last，但不知道:prev 和:next。你在用什么插件吗？
删除了那个特定的标签..是错误的..
这个问题对我来说没有意义，直到我阅读了接受的答案。（特别是，第（1）点在我的大脑中不能很好地解析）。你认为你可以编辑它以增加可读性吗？谢谢。

标签： javascript jquery dom jquery-selectors

【解决方案1】：

jQuery 没有 :prev 或 :next 选择器，我不知道你在哪里遇到它们。不过，有一个 :last 选择器，以及由 jQuery 使用的 Sizzle 选择器库提供的 :first。它是一个非标准选择器，不是 CSS 的一部分，因此在 JavaScript 中实现。

:last 选择器优于 .last() 方法的一个目的是，您可以使用它来过滤选择器序列中间的元素，如下所示（注意 :last 和 :last-child 不一样):

$('.a > .b:last > .c')

而不必像这样编写一连串的方法：

$('.a').children('.b').last().children('.c');

顺便说一句，您所指的“冒号选择器”称为伪类（通俗但错误地称为“伪选择器”）。

【讨论】：

一个令人困惑的问题的好答案！

【解决方案2】：

是的，他们在documentation
有时您不能总是将所有内容都包含在选择器中，或者想要对选择器进行细分。

例如

$(".mylist").each(function(){
  $(this).css("color","red");
  $(this).next().show();
})

【讨论】：

文档中只有:last，而不是:prev 或:next。
@Guffa 我将海报声明 "... selectors like" 解释为通常包含所有 :selector 构造，并回答了为什么您可能会使用其中一个的问题. （文档的链接也应该对此进行修改）

【解决方案3】：

冒号表示一个过滤器，例如在下拉列表中获取所选选项，我将使用 $("select option:selected") 或获取选中的单选框，我将使用 $("input[type=radio]:checked");

没有 :prev 和 :next 过滤器，但您可以在此处找到完整的过滤器列表 http://api.jquery.com/category/selectors/

【讨论】：

【解决方案4】：

这是我如何制作一个带有各种选择器和对象遍历的滑块。

$('#next').click(function () {
  if (!$('*').is(':animated')) {
    if ($('div.display:visible').is(':nth-child(3)')) {

      $('div.display:visible').fadeOut();
      $('div.display:first').fadeIn(function () {
        $(this).children().fadeIn();
      });

    } else {

      $('div.display:visible').fadeOut().next().fadeIn(function () {
        $(this).children().fadeIn();
      });
    }
  }

});

$('#prev').click(function () {
  if (!$('*').is(':animated')) {
    if ($('div.display:visible').is(':nth-child(1)')) {
      $('div.display:visible').fadeOut();
      $('div.display:last').fadeIn(function () {
        $(this).children().fadeIn();
      });

    } else {
      $('div.display:visible').fadeOut().prev().fadeIn(function () {
        $(this).children().fadeIn();
      });
    }
  }

});

【讨论】：

据我所知。他们要求提供示例，这有大量的冒号选择器以及我如何使用它们。