Jquery And Regular Expressions,Trick #1:- Selecting all the tags matching some string or having a particular string in its id or classname

This trick will come very handy for the server controls which sometimes emit their own id’s while rendering the equivalent HTML.Most of the server controls append the id of their parent server control container. So while working with asp.net it becomes a tedious task to catch all those id’s which are different from their actual id’s which we gave using the ‘id’ attribute. This is one of the ugliest thing of WebForms and also this can be treated as a disadvantage while using webforms because we donot have direct id’s as given while we were writing the code, i.e what we gave is not what we recieve. And this is one of the advantage of using MVC framework as it gives more control on the rendered HTML. So here we assume a situation in where we are not using MVC, we are only using webforms and in our case there is a situation where in we have widgets which are user controls and are created dynamically as soon as they are dropped.These widgets when rendered are enclosed inside a div having an id=”widget123333444asdfdf” i.e in the id there is a word widget which is fixed and is inherited and rendered by every widget but after the widget word another random guid value is appended which probably might be the id of widget. So in this case if we only have id’s and no class is assigned to these widgets and if we want to give some common styling to these widgets then it becomes a problem to select all dynamically created widgets and perform some operations on them. You may argue why not use a common class for them and then style them or do whatever you want.But believe me my friends i am telling with experience that there are situations when you only will have id’s or any one selector and you can’t even edit the markup you have to do stuff’s with only what you have. So considering that situation there is a simple one line hack using Jquery Regular expression attribute selectors. These attribute selectors can be used in different ways.I will do detailed posts on these selectors in future. But for now lets concentrate on our particular condition and get a way to select all the elements having a common word in their id’s Consider the example below:-

<body>
    <form id="form1" runat="server">
    <div>
        <div id="first1">
            This is the first div
        </div>
        <div id="first2">
            This is the second div
        </div>
        <div id="first3">
            This is the third div
        </div>
        <input type="button" class="changecolor" value="ChangeColor" />
    </div>
    </form>
</body>

Here we try to mimic the situation discussed above by creating 3 div’s having “first” as common in their id’s followed by their repective numbers.

Now we will use the jquery attribute selector with simple regular expression to selecte each of these 3 div’s and on click of the changecolor button the background color of each div should be changed this is what we have done below.

<style>
        .changecolor
        {
            border: none;
            background-color: #999999;
            color: #fff;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>

    <script src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load("jquery", "1.2.6");
        google.setOnLoadCallback(function() {
            $('#first1').css({ 'background-color': '#C3E5A7' });
            $('#first2').css({ 'background-color': '#A7C4E5' });
            $('#first3').css({ 'background-color': '#DAA7E5' });
            $('.changecolor').click(function() {
                $('div[id*=first]').css({ 'background-color': '#E5C6A7' });
            });
        }); 
    </script>

So here the last line is important in which we use $(‘div[id*=first]’)….. This selector will select all the div’s having “first” in their id’s at any place.

So this gives us a very simple solution for a so called complex problem.

We can use regex selectors with attributes in many different ways which i will show with examples in future posts so stay tuned….

Happy Programming!!!….

You can view live demo of this example here:-