jQuery Class Selector

To select all elements with class named 'general' in the page
$(".general")
ExampleSelect elements with class name
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#btn81").click(function(){
        $("#example-section8 .general").css("background-color", "orange");
        $("#example-section8 .special").css("background-color", "");
    });

    $("#btn82").click(function(){
        $("#example-section8 .general").css("background-color", "");
        $("#example-section8 .special").css("background-color", "orange");
    });
});
</script>

<!-- HTML -->
<a name="#css-class"></a>
<style>
  #example-section8 div {
    width:50px;height:50px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section8">
    <table>
        <tr>
            <td>
                <div class="general">Class 'general'</div>
            </td>
            <td>
                <div class="special">Class 'special'</div>
            </td>
            <td>
                <div class="general">Class 'general'</div>
            </td>
            <td>
                <div class="special">Class 'special'</div>
            </td>
        </tr>
    </table>
</div>
<button type="button" id="btn81">select class 'General' item</button>&nbsp;
<button type="button" id="btn82">select class 'Special' item</button>&nbsp;


To select element with multiple class name
$(".general.special.other")
ExampleSelect elements with multiple class name
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#btn91").click(function(){
        var section = $("#example-section9");
        section.find(".general,.special,.other").css("background-color", "orange");
    });

    $("#btn92").click(function(){
        $("#example-section9 div").css("background-color", "");
    });
});
</script>

<!-- HTML -->
<a name="#select-multiple-class"></a>
<style>
  #example-section9 div {
    float:left;width:50px;height:50px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section9">
    <table>
        <tr>
            <td>
                <div class="general">Class 'General'</div>
            </td>
            <td>
                <div class="NoClass">Class 'NoClass'</div>
            </td>
            <td>
                <div class="special">Class 'Special'</div>
            </td>
            <td>
                <div class="general">Class 'General'</div>
            </td>
            <td>
                <div class="NoClass">Class 'NoClass'</div>                
            </td>
            <td>
                <div class="special">Class 'Special'</div>            
            </td>
            <td>
                <div class="other">Class 'Other'</div>            
            </td>
        </tr>
    </table>
</div>
<button type="button" id="btn91">select class 'General', 'Special' and 'Other'</button>&nbsp;
<button type="button" id="btn92">Reset</button>&nbsp;


To select element with both 'myClass' and 'yourClass'
$(".myclass.yourclass")
ExampleSelect elements with multiple class name in class attribute
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#btn101").click(function(){
        var section = $("#example-section10");
        section.find(".myclass.yourclass").css("background-color", "orange");
    });

    $("#btn102").click(function(){
        $("#example-section10 div").css("background-color", "");
    });
});
</script>

<!-- HTML -->
<a name="#multiple-class"></a>
<style>
  #example-section10 div {
    float:left;width:100px;height:50px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section10">
    <div class="myclass yourclass">Class<br> 'MyClass & YourClass'</div>
    <div class="yourclass">Class 'YourClass'</div>
    <div class="myclass">Class 'MyClass'</div>
    <div class="myclass yourclass">Class<br> 'MyClass & YourClass'</div>
    <br style="clear:both"/>
</div>
<button type="button" id="btn101">select class 'MyClass YourClass'</button>&nbsp;
<button type="button" id="btn102">Reset</button>&nbsp;



comments powered by Disqus