5

In jQuery there are a few colon selectors like

:prev, :next, :last

My question is:

  1. Are they truly part of jQuery, because they are actually used on DOM elements?
  2. We seem to have equivalent methods as well in jQuery prev(), next(), last(). What is the purpose of having 2 different ways?

Any basic examples would be really great.

Improve this question
4
  • 1
    I never knew there was a :prev or :next selector.
    – BoltClock
    Commented Aug 7, 2011 at 18:22
  • I know :last but not :prev and :next. Are you using some plugin?
    – Frédéric Hamidi
    Commented Aug 7, 2011 at 18:23
  • Removed that particular tag..was by mistake..
    – copenndthagen
    Commented Aug 7, 2011 at 18:23
  • This question didn't make sense to me until after I read the accepted answer. (In particular, point (1) doesn't parse well in my brain). Do you think you could edit it to increase readability? Thanks.
    – jpaugh
    Commented Jul 21, 2015 at 14:38

4 Answers 4

Reset to default
10

jQuery does not have :prev or :next selectors, I have no idea where you came across them. There is a :last selector, though, as well as :first, provided by the Sizzle selector library, used by jQuery. It is a non-standard selector, not part of CSS, and is thus implemented in JavaScript.

One purpose of the :last selector over the .last() method is so you can use it to filter elements in the middle of a selector sequence, like this (note that :last and :last-child are not the same):

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

Rather than having to write a chain of methods like this:

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

By the way, the "colon selectors" you refer to are called pseudo-classes (colloquially but incorrectly known as "pseudo-selectors").

Improve this answer
1
  • Great answer to a confusing question!
    – jpaugh
    Commented Jul 21, 2015 at 14:34
2

Here is how I made a slider with all sorts of selectors and traversing of objects.

$('#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();
      });
    }
  }

});
Improve this answer
1
  • 3
    Not to my knowledge. They were asking for examples and this has a ton of colon selectors and how I used them.
    – Xeo
    Commented Aug 7, 2011 at 18:34
1
  1. yes, they are in the documentation
  2. sometimes you can't always include everything in the selector or want a subdivision of the selector.

e.g.

$(".mylist").each(function(){
  $(this).css("color","red");
  $(this).next().show();
})
Improve this answer
2
  • 1
    Only :last is in the documentation, not :prev or :next.
    – Guffa
    Commented Aug 7, 2011 at 18:28
  • 1
    @Guffa I interpreted the posters statement "... selectors like" to generally include all :selector constructs, and answered the question of why you might use one over the other. (also the link to documentation should amend this)
    – Joseph Marikle
    Commented Aug 7, 2011 at 18:30
1

The colon represents a filter like to get the selected option in a dropdown I would use $("select option:selected") or to get a checked radio box I would use $("input[type=radio]:checked");

There are no :prev and :next filters, but you can find a full list of filters here http://api.jquery.com/category/selectors/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.