In jQuery there are a few colon selectors like
:prev, :next, :last
My question is:
Are they truly part of jQuery, because they are actually used on DOM elements?
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.
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").
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();
});
}
}
});
yes, they are in the documentation
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();
})
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/
Related
I have this jQuery code:
$("#Filter ul input:checked").each(function () {
if (!$(this).prop("disabled") && !$(this).hasClass("ignoreInput")) {
Can this be written in only one selector? Right now I'm taking in too many elements to test with the if statement.
Is it also better to use .find(selector) instead of writing all in one selector?
$(document.body).find("#Filter ul ...)
You could use a combination of :not() along with the attribute selector, like this:
$("#Filter ul input:checked:not([disabled],.ignoreInput)").each(function () {
// your logic here
});
Is it also better to use .find(selector) instead of writing all in one selector?
This makes little to no performance difference.
Currently, I have this code:
$(document).ready(function(){
// #filtertab-00 replace this with your element id
$('#filtertab-00 .box-content .es-nav .elastislide-next, #filtertab-00 .box-content .es-nav .elastislide-prev').click(function() {
// trigger lazy load
$("#filtertab-00 img.lazy").each(function(i) {
$(this).delay(150*i).fadeIn(1000, function() {
var src = $(this).attr("data-original");
$(this).attr('src',src);
});
});
});
});
and i want to use this function to target object names (id) as below:
filtertab-00
filtertab-10
filtertab-20
filtertab-30
filtertab-40
filtertab-50
filtertab-60
....
filtertab-90
Does anyone know how to use the loop function to get it work?
i just want this:
when i click pre or next button after i select a tab(name varies from filtertab-00 to filtertab-90),it will activate lazyloading for images at current selected tab.
any idea is welcome!
Perhaps you could use jQuery's attribute-starts-with selector. You can then just select all IDs that begin with filtertab- using jQuery like this:
$('div[id^="filtertab-"]').each( //magic goes here );
Note: This method is slow because it has to search the DOM for elements with IDs that meet the criteria, but it does the job. I've never noticed an appreciable latency.
This is solved through selector magic as filoxo described but since you want the images, here's another version involving find() to get your actual images.
$('div[id^="filtertab-"]').find("img.lazy").each(function(i) {
$(this).delay(150*i).fadeIn(1000, function() {
var src = $(this).attr("data-original");
$(this).attr('src',src);
});
});
In addition to that, check out the impressive list of jQuery selectors. They cover a lot of ground :)
$(".dist_radio").click(function() {
$(this).attr("class", "dist_radio dist_on");
if (!$(this)) {
$(".dist_on").attr("class", "dist_radio");
}
console.log($(this).attr("class"));
});
I'm using this code to style radio buttons and it sort of works apart from the fact that when I click on another button, the rest don't get dist_on class removed. Can you please tell me what's wrong with it?
Use the .not method:
$(".dist_radio").not(this).attr("class", "dist_radio");
But for your logic, you could just do like below (use addClass/removeClass instead of changing the class attribute directly):
$(".dist_radio").click(function() {
$(".dist_radio").removeClass('dist_on');
$(this).addClass('dist_on');
});
You can use .not():
Remove elements from the set of matched elements.
$(".dist_radio").click(function () {
$(this).attr("class", "dist_radio dist_on");
$(".dist_on").not(this).attr("class", "dist_radio");
console.log($(this).attr("class"));
});
or better using .addClass() and .removeClass() to make your code clearer:
$(".dist_radio").click(function () {
$(".dist_radio").removeClass("dist_on");
$(this).addClass("dist_on");
});
You can use .not() function to exclude the element from the selected set. Passing this to .not() will exclude the current object. You do not need if here to exclude it.
$(".dist_on").not(this).attr("class", "dist_radio");
.not(): Remove elements from the set of matched elements.
Your code would be
$(".dist_radio").click(function() {
$(this).attr("class", "dist_radio dist_on");
$(".dist_on").not(this).attr("class", "dist_radio");
});
I have a jquery selector that I would like to change so that it wont select <div id="divA"></div>.
Heres the current selector:
$('ul.toggle a').on('click', function () {
//does some work
});
I tried $('ul.toggle a [id!=divA]') but that thows errors.
What is the intended format for this selector?
You can use :not to remove elements from the set of matched elements.
$("ul.toggle a:not('#mhs-link')")
How about this-
$('ul.toggle a').not('#divA')
The .not() function simply removes elements from a previous list of elements. Because of some nifty function chaining, you can just insert that into your current definition -
$('ul.toggle a').not("#divA").on('click', function () {
//does some work
});
References
not() - Remove elements from the set of matched elements.
This seem like long way of doing things, is it possible to dynamically assign numbers to ids?
$(function () {
$('#Button1').click(function(){
$('#RegularExpressionValidator1, #RegularExpressionValidator2, #RequiredFieldValidator1, #RequiredFieldValidator2, #RequiredFieldValidator3, #RequiredFieldValidator4, #RequiredFieldValidator5, #RequiredFieldValidator6, #RequiredFieldValidator7, #RequiredFieldValidator8, #RequiredFieldValidator9').css("display", "block");
});
});
These are .NET generated ids which I don't have access to.
You can use an "attribute starts with" selector:
$("[id^='RegularExpressionValidator']").css("display", "block");
From the jQuery docs:
This selector can be useful for identifying elements in pages produced
by server-side frameworks that produce HTML with systematic element
IDs. However it will be slower than using a class selector so leverage
classes, if you can, to group like elements.
Have a look at the attributes starts with selector. Using it, you can simply do this:
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});
This will select all elements with an ID starting with RegularExpressionValidator. You may want to specify the element type, as well as a container to look in to select fewer elements.
You may also want to use $.show() instead of $.css():
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').show();
try
$(function () {
$('#Button1').click(function(){
$('[id^="RegularExpressionValidator"], [id^="RequiredFieldValidator"]').css("display", "block");
});
});