Question

I expect this code will change the text only on last div (Div5), but it doesn’t:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $(".blue", "#Div5").text("Hello");
    });
</script>

<form id="form1" runat="server">
<div>

    <div id="Div1" class="blue">AAAA</div>
    <div id="Div2" class="yellow">BBBB</div>
    <div id="Div3" class="blue">CCCC</div>
    <div id="Div4" class="yellow">DDDD</div>
    <div id="Div5" class="blue">EEEE</div>

</div>
</form>

Does anybody happen to know what’s wrong?

Answer 1

The context is used for specifying a container element. In your example, you are referencing the same element in the context as your selector.

You can simplify to this:

$("#Div5").text("Hello");

Or, if you still want to explicitly specify the class:

$("#Div5.blue").text("Hello");

Both will have the same result.