Multiple Selector examples in JQuery

In this post we will understand more about Multiple Selector in JQuery.

Continue with our earlier example of JQuery Selector.  In my previous post, We have found that their is an issue since, we want to give blue border to all textbox, irrespective of whether it is Textarea (i.e. textbox with textmode is multiline) or normal singleline textbox control (i.e. Input type="text").

As i said, I can add one more line for Textarea to achieve this, but it will not be good way to do things from maintainability point of view.  Example: let say if requirement gets change and i want my blue border to appear as red.  There are chances that i update one line and not other, in that case few textbox have blue border and other have red.

This can solve problem, but their is a better way to solve problem.

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $("span").css("background-color", "Yellow");
        $("input:text").css("border-color", "blue");        
        $("textarea").css("border-color", "blue");        
    });
</script>

Instead of writing two lines of code, we can take advantage of Multiple Selector where we can pass multiple selectors to apply same style.

so you just need to change your JQuery code to something like one i wrote below.

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        $("span").css("background-color", "Yellow");
        $("textarea, input:text").css("border-color", "blue");        
    });
</script>

Output on browser screen

We will be looking for more Multiple selector example as we walk through this tutorial

Watch Live demo of JQuery Multiple Selector Example