En jQuery hay algunos selectores de colon como

: anterior,: siguiente,: última

Mi pregunta es:

  1. ¿Son realmente parte de jQuery, porque en realidad se usan en elementos DOM?
  2. Parece que también tenemos métodos equivalentes en jQuery prev(), next(), last(). ¿Cuál es el propósito de tener 2 formas diferentes?

Cualquier ejemplo básico sería realmente genial.

5
testndtv 7 ago. 2011 a las 22:19

4 respuestas

La mejor respuesta

JQuery no tiene selectores :prev o :next, no tengo idea de dónde los encontraste. Sin embargo, hay un selector :last, así como :first, proporcionado por la biblioteca del selector Sizzle, utilizado por jQuery. Es un selector no estándar, no forma parte de CSS y, por lo tanto, se implementa en JavaScript.

Un propósito del selector :last sobre el método .last() es para que pueda usarlo para filtrar elementos en el medio de una secuencia de selector, de esta manera (tenga en cuenta que :last y {{X3} } no son lo mismo):

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

En lugar de tener que escribir una cadena de métodos como este:

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

Por cierto, los "selectores de colon" a los que se refiere se denominan pseudo-clases (coloquialmente pero incorrectamente conocidos como "pseudo-selectores").

10
BoltClock 22 may. 2012 a las 14:38
  1. sí, están en la documentación
  2. a veces no siempre puede incluir todo en el selector o desea una subdivisión del selector.

E.g.

$(".mylist").each(function(){
  $(this).css("color","red");
  $(this).next().show();
})
1
Joseph Marikle 7 ago. 2011 a las 18:24

Los dos puntos representan un filtro para obtener la opción seleccionada en un menú desplegable que usaría $("select option:selected") o para obtener una casilla de radio marcada que usaría $("input[type=radio]:checked");

No hay filtros anteriores y siguientes, pero puede encontrar una lista completa de filtros aquí http: // api.jquery.com/category/selectors/

1
Liam Bailey 7 ago. 2011 a las 18:26

Así es como hice un control deslizante con todo tipo de selectores y desplazamiento de objetos.

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

});
2
Sk8erPeter 25 ene. 2013 a las 00:50