jQuery case insensitive attribute selector

is html case sensitive This is a topic that many people are looking for. star-trek-voyager.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, star-trek-voyager.net would like to introduce to you jQuery case insensitive attribute selector. Following along are instructions in the video below:

“Is part 9 of jquery tutorial in this video. We ll discuss how to write write jquery case insensitive attribute value selector let s understand this with an example. We got three developments here and look at the title. Attribute value for each of the developments is the same thing div title.

The only thing that is different is the casing of letters. So for the first div. We ve got a mix of both uppercase and lowercase letters for the second div. All letters are in uppercase and for the third live.

All letters are in lowercase and look at the jquery code. Here. So this is basically telling find all the developments which have got the title attribute and the value of the title. Attribute must be equal to div title so for all such div elements.

We want to include a three big cell. Solid red border so when we execute this code look at what we get we get a red border only around the first development. But not around the second day of and third day. Why is that that s basically because by default.

The comparison is going to be case sensitive so let s see how to make this comparison case insensitive let s flip to visual studio. So this is the same example that we have seen on the slide. And when we reload this page..

.


Look at that we get a solid red border just around div one element. So let s see how to make this compassion case insensitive to achieve that i m going to first remove this value from the title attribute. So what is this going to do this is going to return us all developments which have got the title attribute it doesn t really care about what value they have got as long as a development has a title attribute. It s going to include that in the collection that will be returned so from that collection what do we want to do we want to filter out all those elements.

Which it does not have title attribute value equal to div title. Ignoring the case so for that i m going to use the filter method. And when this filter method is called we want to execute some code. So i m going to use an anonymous function and inside this anonymous function.

We want to return dollar this so what does this a keyword refers to here this refers to an item that is within this collection. So this collection is going to contain all developments that have title attribute and this keyword refers to such an element. And what we want to do here is retrieve the title attribute value so this attr function. I m going to pass the name of the attribute okay so this is going to return the title attribute value.

And what we are going to do with that value is we are going to convert that to lowercase and then compare it with lowercase div title. So let s copy this string and paste. It here so to convert a selected string in visual studio to lowercase you can use a keyboard shortcut and it is control you now if you want to convert all the letters to uppercase. There is a keyboard shortcut as well and that is ctrl shift you all right so what is this going to do this is going to give us only those elements.

Which have got a title attribute and the value is div title. Ignoring the case. Okay so let s save these changes and when we reload this page..

.


We should get a solid red border around the three developments and for example. If we change this to one div title. And when we reload. This we should not have a border around every element.

Now let s look at another example. Let s see how to make this attribute contains a selector case insensitive. What is attribute contains selector name star equals value we discuss this in detail in our previous video session. So let s understand this with an example again we have the three developments and all of them have got the title attribute and if you look at the value all the attribute values contain this substring div and look at the code on the right hand side.

So this is basically telling find all the developments which have got the title attribute and the value of the title. Attribute must contain this substring div and if you look at the value of each of the development. You know they contain that substring there. But then the casing is different and as a result of that look at what we get only a red border around the first development.

But not for div 2. And dip 3. So let s see how to make this attribute contain select a case insensitive so let s flip to visual studio. So do title star equals dev and let s remove the filter function so basically here verifying.

All developments which have got the title attribute and the title. Attribute must contain this substring div so look at this when we reload this page. We only get a red border on the first development..

.


So let s see how to make this attribute contains value selector case insensitive okay so i m going to remove this value. And we re going to use the filter method just like how we did in the previous example. So let s include an anonymous function so within this filter function. We are going to use a regular expression return so in javascript or jquery be included regular expression in two forward slashes.

So. What is our regular expression. Going to be this string tip. Now we want the comparison to be case insensitive.

So i m going to use this flag. I okay so this eyes says another comparison has to be case insensitive dot. So on this regular expression object. I am going to call this test method and then to this test method we have to pass a string and the string is going to be our attribute value so dollar this dot attr and we want to retrieve the title attribute value so what is this doing so this is basically telling you know retrieve the title attribute value of the given element within the collection and if that title attribute value.

Contains this word div. Ignoring the case. Then we want to return all such elements. And for all such elements.

We want a three pixel solid red border. So now here the comparison is going to be case insensitive. So when we reload this look at this we should get a border around all the three developments..

.


Okay because all of them have caught that substring. Okay. Now let s remove this tea from here so this title. Attribute value now doesn t contain div substring.

So when vd load this page. We should not have a red border around that development now let s look at another way of rewriting. This here way including our regular expression into forward slashes we can either do that or we have this regular expression function constructor we can use that as well okay so let s see how to use that regular expression function constructor okay so here i m going to use take a little expression object and look at this this has got two parameters. The first parameter is the regular expression itself.

Which is div and then the second parameter is the flags. Okay. We want the comparison to be case insensitive. So i m going to specify that flag i and this function constructor is going to return us a regular expression object and on that map object.

We are calling this test method. So when we reload. This the behavior should be exactly the same thing and here our dividuals to do keyboard shortcuts to convert a selected text to uppercase or lowercase thank you for listening and ” ..

.

Thank you for watching all the articles on the topic jQuery case insensitive attribute selector. All shares of star-trek-voyager.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
description:

tags:

Leave a Comment