Video tutorial to demonstrate loading of images dynamically using jQuery looping method: .each()
In this tutorial, we take 5 div elements in our html document, and then using each() method, we loop through each of these div tags and insert images in each one of them.
Here we select all the div tags and loop through each one of them using each() method. Using this selector, we append image tag with a image to each div present in our html document.
+ is concatenation operator. i++ is a shorthand notation of i = i + 1;
++i is pre increment. i++ is post increment.
Similarly, – -i is pre decrement. i- – is post decrement.
Ex:
let i = 1;
display or echo ++1; results in 2. after display i = 2; display or echo i++; results in 1. after display i = 2;
Note: We have our images inside a folder called images.
Video Tutorial: Dynamically Load Images: jQuery Looping
each() method is often used in all the application level programming logic. We would also use a static method $.each() when we encounter ajax in jQuery. We would explain it in further videos. Stay subscribed to our blog and youtube channel and please like and share our tutorials with your friends.
In this example, we take some list of images and using CSS we make the display property to none. Hence hiding all the images from being displayed. Using filter methods we write our jQuery script to fetch elements(images).
Here, we select ol tag and fetch all its children, and inturn select its 4th child using its index number, to which we apply the css property of display to inline.
Here, we select ol tag and fetch all its children, and inturn select its children from index 1 to 4 i.e., image 1, 2 and 3, to which we apply the css property of display to inline.
Here, we select ol tag and fetch all its children, and inturn select its children which do not have the class name no i.e., image 0, 1 and 3, to which we apply the css property of display to inline.
This is opposite of not() method. Here, we select ol tag and fetch all its children, and inturn select its children which has the class name no i.e., image 2 and 4, to which we apply the css property of display to inline.
Video Tutorial: jQuery Filter Methods To Narrow Selection
These are the 6 filter methods of jQuery, using which we can narrow down our selection.
I’m using images to make sure the learning stays colorful and not pale boring text. These filter methods will come in handy in later stages wherein we under take some complex application developments. These type of methods save us time and the number of line of code, to achieve the same thing manually.
How to test these methods: Looking at our previous day tutorials, write a simple program with some html element structures and take a button. Clicking on the button, you call each of these methods and see the output.
Keep the programs simple, so that you can first understand the output. Later these simple DOM tree traversal techniques will be very useful while you encounter with some complex application development.
Video tutorial illustrates the use of jQuery methods to add and remove CSS class to HTML elements on the fly or dynamically.
Let’s assume that we have a client and her requirements: She has a menu with both vegetarian and non-vegetarian items in it. Once her customer clicks on a button called Vegetarian, all the vegetarian items must get highlighted in the menu. Once the customer clicks on Restore button, all the highlighting must disappear and the menu must look as before.
Here we have an ordered list with some list items in it. The vegetarian items have a class name of veg. and non-vegetarian items have a class name of non_veg.
Two buttons with its respective ID’s.
Some CSS coding: It has 1 class which has a background color of light green and a width of 100px.
This class must be dynamically applied to the list items with class name veg, upon clicking of the button Vegetarian.
Once the document is loaded and ready we call an anonymous function. When the user clicks on the button with an id of select_veg, we select all the list items with the class veg and add the CSS class highlight to it, using addClass method of jQuery. Which brings light green background color to those list items.
When the user clicks on Restore button which has an id of restore_menu, we remove the CSS class highlight from all the list items using removeClass method of jQuery.
Video Tutorial: jQuery Methods and CSS: Restaurant Application
Assume that a client has mailed her requirements to us: She has 5 images in her html page. Once the user clicks on a image, a message should popin beside the image. Image should be clickable only once. Once the user clicks on other images, the messages appended beside previously clicked image must be removed.
With these requirements in mind, we shall start developing our image based jQuery Application.
Once the document is ready and the user clicks on a image: 1. Any b tag present in the document is removed. Thus, the message associated with the image which was being clicked previously is removed. 2. The parent tag of the image being clicked: i.e., div tag is selected and a message with b tag is appended to it, which appears beside the image being clicked by the user. 3. The event associated with the image being clicked is removed.
Note: Use of function().function() is called chain method. Example: parent().append(); next().parent().remove(); etc
Make sure to maintain the order of the code. If you replace or rearrange the code in a way other than above, you wouldn’t get expected result. While practicing, change the order of the code and look for the output, that would help you understand the code and the flow / execution flow well.
Video Tutorial: Working With Images: Small jQuery Application
