Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery case insensitive attribute selector

Suggested Videos
Part 6 - jQuery class selector
Part 7 - jQuery attribute selector
Part 8 - jQuery attribute value selector



In this video we will discuss, how to write a jQuery case-insensitive attribute value selector. Let us understand this with an example.



The following example, only selects DIV 1. This is because jQuery attribute value selector is case-sensitive.
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div[title="DivTitle"]').css('border', '3px solid red');
        });
    </script>
</head>
<body>
    <div title="DivTitle">
        DIV 1
    </div>
    <br />
    <div title="DIVTITLE">
        DIV 2
    </div>
    <br />
    <div title="divtitle">
        DIV 3
    </div>
</body>
</html>

jQuery case insensitive attribute selector

Use the following code to make the jQuery attribute value selector case-insensitive 
<script type="text/javascript">
    $(document).ready(function () {
        $('div[title]').filter(function () {
            return $(this).attr('title').toLowerCase() == 'divtitle';
        }).css('border', '3px solid red');
    });
</script>

The above script should select all the 3 divs.
case insensitive jquery selector

Now let us look at an example of making attribute contains selector [name*="value"], case-insensitive.

The following example, selects only DIV 1 element. This is because the attribute contains selector is case-sensitive. 
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div[title*="Div"]').css('border', '3px solid red');
        });
    </script>
</head>
<body>
    <div title="DivTitle1">
        DIV 1
    </div>
    <br />
    <div title="DIVTITLE2">
        DIV 2
    </div>
    <br />
    <div title="divtitle3">
        DIV 3
    </div>
</body>
</html>

jquery attribute contains selector case insensitive

To make attribute contains selector case-insensitive, use filter() method and regular expression as shown below.
<script type="text/javascript">
    $(document).ready(function () {
        $('div[title]').filter(function () {
            return (/Div/i).test($(this).attr('title'));
        }).css('border', '3px solid red');
    });
</script>

OR

<script type="text/javascript">
    $(document).ready(function () {
        $('div[title]').filter(function () {
            return RegExp('Div', 'i').test($(this).attr('title'));
        }).css('border', '3px solid red');
    });
</script>

The above script should select all the 3 divs.
jquery attribute contains case insensitive

Visual Studio Keyboard Shortcuts
Convert Selected Text to Upper Case - CTRL + SHIFT + U
Convert Selected Text to Lower Case - CTRL + U

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.