Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We are going to look now at Content and Visibility filters as well as Child filters. Content and Visibility filters examine the content of the elements that are returned by the selector expression or their visibility property to determine if they should be included or excluded from the result set. So the Content filter has four options. There is the contains filter, and you pass it some text. What will happen here is jQuery will look inside the child elements of the element on the selector to see if they contain this text string anywhere within their content, in any of their child elements.
The next one, the empty filter, says only include elements in the result set that have no child elements inside them. The next one, the has filter, you pass that a selector and this will filter elements in the result set that contain at least one element that matches this selector that you have given it. Finally, there is a parent content filter that says only match elements in the result set that are themselves parents. For example, they contain at least one other elements including text elements.
For the Visibility filter there are only two options. There is visible and there is hidden, and that's pretty self-explanatory. This only includes elements that are visible; this one only includes elements that are hidden. Let's take a look at the Child filters. Child filters allow you to refine the selection by looking at the relationship that the element has with its parent elements. There are four options here. Actually there are more, because the nth-child option has a few. So the nth-child filter has a couple of different things you can do. You can give it even or odd.
It kind of works the same way as the even or odd filters that we looked at in the previous example. Only in this case it's operating on child elements, not the parent elements. So this will only match elements that are even or odd inside the parent. The nth-child, where you are given an index, will match all elements that are at that index inside the parent. Then the last one, which is pretty powerful, is the equation. You can actually give nth-child an equation of the form xn+m and m is option obviously.
For example, you can say 2n for every second one or you can say 3n+1 and then n will start counting at 0. It will count 0, 1, 2 and so on. Then this equation will be calculated and then that will be the index of the element that gets selected. We will see an example of that in a moment. Then finally, there are a few other options. There is first-child, which will match elements who are the first child of their parent, and then predictably there is last and only and those will match elements who are the last child of their parent or the only child of their parent.
Back in the folder for the examples, I am going to start off with the ChildVisCont_start file, and here is the finished example if you want to jump ahead. So I am going to open this up with my text editor. This is the example file at we are going to be using for the Child and Visibility and Content filters. So let's go ahead and get started playing around with some of the examples. Let's try something pretty simple. I am going to write a query that says get me paragraph tags, only paragraphs that contain the text string 3.
Again we are going to draw our little CSS trick to make it visible and we will give it a border that's 3 pixels solid red. So let's save that and let's bring that up in the browser. When you look very quickly, you will see that there is a text string 3 right there for this guy, so that's the one that should be selected, because where paragraphs that contain 3. Save, and we are going to bring up it in the browser and you can see that that's the guy that got highlighted.
All right, let's go back to the code and make a quick change and watch what happens. First, that guy was misnumbered. Now let's take off the p. Let's just do this. Let's just do contains by itself. So what this is going to say is I don't care what element it is. Just select all the elements that contain the text string 3. Now at first blush you might say okay. Well, that's going to be this guy here, right, the list item and it's going to be this paragraph. So let's watch what happens when we go out to the browser. I am going to save.
Now I am going to refresh. Wow! Everything got selected. So the list item here that has the 3 in it and the ul right, then it looks like the entire container here, the body. And here the paragraph has a 3. So let's go figure out what's happening. So here we are back in the code. Remember what we are asking jQuery now to do is say, hey, get all the elements that contain the text string 3. Well, sure, the list item contains the text string 3, but so does the ul. Why? Because the ul contains the li and that contains that string.
Well, so is the body, and in fact you can see here that's the reason why the whole body is being outlined is because even though this paragraph right here has the string in it. Well, so does its parent and its parent is the body tag, and the parent of the body is the HTML. Everything is being highlighted. So this is an example of where results may be a little unexpected, if you are not keeping in line to the hierarchical relationship that jQuery looks at when it's examining tags. So to limit what happens when you are using filters like Contains or so on, you might want to put the scope in there that you are looking at.
So for example, if you only wanted the list item in the paragraph, we can say li:contains(3),p:contains(3), then that will do the right thing. Let's move on to the next example. So I will comment that guy, and copy and paste and uncomment. Now let's try the parent operator. So we are going to get paragraphs that are parents. So this will look at all the paragraph tags and if they contain another tag, then including text items, they will be included in the result set.
So I am going to save and then refresh, and you can see that all the paragraphs got selected because they all contained content. So they were all bordered. Now let's go back to the code. Let's try another example. Comment that guy, put this one in. Now let's try an example of the has operator. So let's get rid of this. We are going to ask jQuery to find us unordered lists and we are only going to look for unordered lists that has a list item in them that has a class attribute that's equal to a.
So what we are doing here is this is selector all on its own, so list items that have a class equal to a, but we are not selecting the list items, what we are selecting is the ul. But we are only selecting the ul, if it has a list item inside that matches this. So let's save and go back to the browser. So now we are going to refresh, and you can see that the ul was in fact included in the results, because it does have a list item that has that class.
So if we go back to the code, and we change that to class=c. Well, there is no class c. So now this will result in nothing being highlighted. So we will save, go back to the browser. Now we will refresh and you will see that the unordered list is not highlighted anymore. Let's do a couple of nth-child examples. So let's go back to the code and let's comment this and paste. So now we are going to do this. Let's say we are going to look for the, unordered list and we are going to look for the list item that's the nth child = 3.
So this says get me the list item that is the third child that's inside an unordered list. Let's go back to the browser, and refresh, and you will see that sure enough the third child is highlighted, because that's the third list item that's inside the ul. Let's go back and try something else. Let's just try now. Let's just say li:last-child and we will save and we will refresh. Let's bring it up and sure enough, the last list item child is selected.
Finally, let's try an equation. Let's comment this guy out and we will do this. Let's try, ul li:nth-child, but in this case let's do (2n). So now what's going to happen is n is going to start out counting and it's going to select every other one. So let's refresh in the browser and you can see that items 1 and 3 were selected.
That's something worth noting. So let's go back to the code. Earlier, you might have caught it when I said that jQuery operates on elements that are 0 index based. This is an exception here. When you are using the nth-child operator and you are using the equation, the n variable starts off counting at 1. It doesn't start off counting at 0. So that's something to keep in mind. But you can see that it has selected pretty much every other one in the bunch. So if I changed this to 3n, and when you refresh you can see that it's 1, 2, and 3.
So 3 time 3n is 3. That's the one that got selected. So that's how Child and Content Visibility filters work. Let's move on now to our next lesson.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105445 Viewers
56 Video lessons · 117130 Viewers
71 Video lessons · 86354 Viewers
131 Video lessons · 41269 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.