ansaurus

Question

Grab the ID of a DIV Tag and then add some CSS style to the DIV accordingly

Answer 1

+7 A:

this already represents the div the user clicked on. You don't need to re-select it using jQuery since you already have a reference to it.

Simply, add the class to it:

$(this).addClass('someClass');

For your example:

$(".myClass").click(function(e) {
    // dont need to pull the id attribute
    // dont need to select the element again by id
    $(this).addClass('someClass');
});

And let's say if you need to select some element by id and id happens to be a variable, then this syntax is not valid:

("$(\"#"+whichDiv+"\")").addClass();

Here, you are creating a string, and then trying to call the addClass method on string, which doesn't exist. Also calling addClass without any parameters is useless, since you want to pass in the class name to add to the element here.

$("#" + whatid).addClass('someClass');

Anurag 2010-07-12 16:32:19

Many thanks to you, Anurag.

2010-07-12 18:47:31

@kwokwai - Glad it was helpful. Cheers!

Anurag 2010-07-12 19:09:39

Answer 2

+1 A:

Here's the complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Click Me</title>
    <style>
        .foo { 
            color:#F00;
            font-size:40px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">

        $(function () {

            $('.myclass').click(function () {
                alert('you clicked this: ' + this.id);
                $(this).addClass('foo');
            });

        });

    </script>
</head>
<body>
    <div id="mytest1" class="myclass">
        helloworld i am new to jquery 1
    </div>
    <div id="mytest2" class="myclass">
        helloworld i am new to jquery 2
    </div>
</body>
</html>

AndrewDotHay 2010-07-12 16:38:13

Answer 3

+1 A:

If the selector is literally a concatenation of "divName" plus the ID of the element that you clicked, then try this:

$(".myClass").click(function(e){
    $("#divName" + this.id).addClass('someClassName');
}

UPDATE:

To match the HTML you provided, do the following, but be aware that it may not work because it is invalid to start an ID with a number.

$(".myClass").click(function(e){
    $("#myTest" + this.id).addClass('someClassName');
}

Instead, you should make your IDs valid by starting them with a letter, and adjust the paired element ID to match the change.

patrick dw 2010-07-12 16:44:31

You are right.Thank you, Patrick.

2010-07-12 18:47:04

ansaurus

tags:

views:

answers:

Grab the ID of a DIV Tag and then add some CSS style to the DIV accordingly

related questions