Filtering Elements

5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€95.97
List Price:  €134.37
You save:  €38.39
£79.79
List Price:  £111.71
You save:  £31.92
CA$140.31
List Price:  CA$196.44
You save:  CA$56.13
A$153.75
List Price:  A$215.26
You save:  A$61.51
S$134.64
List Price:  S$188.51
You save:  S$53.86
HK$778.36
List Price:  HK$1,089.74
You save:  HK$311.37
CHF 89.34
List Price:  CHF 125.09
You save:  CHF 35.74
NOK kr1,107.14
List Price:  NOK kr1,550.05
You save:  NOK kr442.90
DKK kr715.75
List Price:  DKK kr1,002.09
You save:  DKK kr286.33
NZ$171.37
List Price:  NZ$239.93
You save:  NZ$68.55
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,945.63
List Price:  ৳16,724.36
You save:  ৳4,778.73
₹8,442.99
List Price:  ₹11,820.52
You save:  ₹3,377.53
RM446.75
List Price:  RM625.47
You save:  RM178.72
₦169,271.38
List Price:  ₦236,986.70
You save:  ₦67,715.32
₨27,777.22
List Price:  ₨38,889.22
You save:  ₨11,112
฿3,446.26
List Price:  ฿4,824.91
You save:  ฿1,378.64
₺3,454.90
List Price:  ₺4,837
You save:  ₺1,382.10
B$580.04
List Price:  B$812.08
You save:  B$232.04
R1,815.38
List Price:  R2,541.61
You save:  R726.22
Лв187.66
List Price:  Лв262.73
You save:  Лв75.07
₩140,436.95
List Price:  ₩196,617.35
You save:  ₩56,180.40
₪371.46
List Price:  ₪520.07
You save:  ₪148.60
₱5,893.31
List Price:  ₱8,250.87
You save:  ₱2,357.56
¥15,475.45
List Price:  ¥21,666.25
You save:  ¥6,190.80
MX$2,042.64
List Price:  MX$2,859.78
You save:  MX$817.14
QR364.56
List Price:  QR510.41
You save:  QR145.84
P1,367.06
List Price:  P1,913.94
You save:  P546.88
KSh12,945.58
List Price:  KSh18,124.33
You save:  KSh5,178.75
E£4,964.52
List Price:  E£6,950.52
You save:  E£1,986
ብር12,237.67
List Price:  ብር17,133.23
You save:  ብር4,895.55
Kz91,290.87
List Price:  Kz127,810.87
You save:  Kz36,520
CLP$97,782.75
List Price:  CLP$136,899.76
You save:  CLP$39,117.01
CN¥724.22
List Price:  CN¥1,013.94
You save:  CN¥289.72
RD$6,024.63
List Price:  RD$8,434.73
You save:  RD$2,410.09
DA13,426.15
List Price:  DA18,797.15
You save:  DA5,371
FJ$227.57
List Price:  FJ$318.61
You save:  FJ$91.03
Q771.64
List Price:  Q1,080.33
You save:  Q308.69
GY$20,913.50
List Price:  GY$29,279.73
You save:  GY$8,366.23
ISK kr13,962.80
List Price:  ISK kr19,548.48
You save:  ISK kr5,585.67
DH1,005.63
List Price:  DH1,407.93
You save:  DH402.29
L1,821.98
List Price:  L2,550.85
You save:  L728.86
ден5,904.20
List Price:  ден8,266.12
You save:  ден2,361.91
MOP$801.48
List Price:  MOP$1,122.11
You save:  MOP$320.62
N$1,812.81
List Price:  N$2,538.01
You save:  N$725.20
C$3,678.31
List Price:  C$5,149.78
You save:  C$1,471.47
रु13,500.25
List Price:  रु18,900.90
You save:  रु5,400.64
S/379.05
List Price:  S/530.69
You save:  S/151.63
K402.47
List Price:  K563.48
You save:  K161
SAR375.40
List Price:  SAR525.58
You save:  SAR150.17
ZK2,764.29
List Price:  ZK3,870.12
You save:  ZK1,105.82
L477.77
List Price:  L668.90
You save:  L191.12
Kč2,432.37
List Price:  Kč3,405.42
You save:  Kč973.04
Ft39,496.05
List Price:  Ft55,296.05
You save:  Ft15,800
SEK kr1,103.50
List Price:  SEK kr1,544.95
You save:  SEK kr441.44
ARS$100,363.46
List Price:  ARS$140,512.86
You save:  ARS$40,149.40
Bs690.75
List Price:  Bs967.07
You save:  Bs276.32
COP$438,931.09
List Price:  COP$614,521.09
You save:  COP$175,589.99
₡50,918.63
List Price:  ₡71,288.12
You save:  ₡20,369.49
L2,526.16
List Price:  L3,536.73
You save:  L1,010.56
₲780,388.98
List Price:  ₲1,092,575.79
You save:  ₲312,186.81
$U4,261.82
List Price:  $U5,966.72
You save:  $U1,704.90
zł416.31
List Price:  zł582.85
You save:  zł166.54
Already have an account? Log In

Transcript

Hello, in this jQuery video, I'm going to show you traversing I'm going to show you the filtering part of it. So when we actually before we get on to the jQuery part that's great about HTML. I'm going to create a bunch of div the elements, the complexity doesn't matter. Once you get to grips with selectors, which were a separate section in this series, you can check out then you're able to go on campus some of my favorite foods of pizza. Fried chicken or fried chicken today, I literally just had a stone, waffles, ice cream, finger and that's also a real mind match. Okay, so if I reload it, see what we get.

We get, you know, five items as simple stuff. If I do a selector, so if I just select Dear audience, and I want to you know, modify it. Let's say I want to add a class. to want to know more about this sort of stuff, feel free to check it out in the series of videos covering it in the HTML and CSS section, and the attributes as well. So I'm saying read, I've got this customer class right here, we just changed the text color to red. So there we go, it's all red.

But you know, it changes all of it. If we want a bit more flexibility, what we can do. So this is select everything. And if maybe you only want to select the item, before you do, you know dot add class or dot CSS or you know, whatever you want to do to your particular element I selected go here you do dot this is where you filter it. First, and this will just get the first one. So if I save it now, it just gets the first one, whenever the one picked up or if there's a bit of is literally the first one.

My thinking, is there a way that we can do this for the last item? If you're thinking that you're right there is and you can get guess what is select the last item, it is literally left by reload. It just modifies the last one. Okay, so pretty cool. In number one that you can do, which I actually covered this in the separate video, which is selecting by index. So select by index.

So if you want to know more about that, feel free to check that video in just put EQ select the index number. So if I say one for example uncomment this and see which one is you know, how the red class applied to it. Am I thinking why is this One even though we chose one member computer, start with zero. So the first, you know, element is this one, it's the one at index zero. Okay, so that's the, you know, index want. Another way you can do, there's another method that you can do which is called dot filter, a bit more thought of complex look like copy this filter.

So that you put filter, but you can filter based on something like if we had a certain class. So if I, if I say, only do it to the ones that have the class of 10 Oh, at the moment, you're applied to nothing. If I go back, however, and let's say if I say class of Hello Hello as well. And if I reload, as you can see, it's a get all the divs will filter it to the ones that have the class which in this dot indicates class, the class of Hello, you could have an opera commerce say you know this or that class you know, any sort of filtering or any sort of conditions that you could put know in this selector here, you can do that as well as the component element type, or you can also do is something called the knot and that allows you to say anything that doesn't match this condition.

So if I just change this to not filter based filter not based on a condition and I reload it now what you'll see is the opposite ones have the class the red class applied, so wait does it get ordered. Then it says filter it to anything that doesn't crease the not keyword doesn't have this Hello class and then he adds the class of Read so that they will train when you're traversing items really powerful, really useful stuff. It really helps you know instead of having to you know create multiple classes and ID for this and ID for that just because you know, you find it difficult to get deep particular item that you want, maybe you want you know, always the last one, maybe the has some sort of special styling, and this will allow you to easily do that. If you have any questions, feel free to call me a message.

And as usual, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.