CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shikhar_Bansal
Shikhar_Bansal

Reputation: 3

accessing an element of a class in jquery not working

I want to access different id's (with same name) using $this in jquery, but its not working. I want when a superhero is clicked only his friend and he himself change their class only.

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.shikhar').click(function(){
            $(this).find('#a').click(function(){
                $(this).find('#b').addClass("selected");
                $(this).find('#a').addClass("highlight");
            });
            $(this).find('#b').click(function(){
                $(this).find('#a').addClass("selected");
                $(this).find('#b').addClass("highlight");
            });
        });
    });
</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<div class="shikhar">
    <div id="a">Spiderman</div>
    <div id="b">Hulk</div>
</div>
<div class="shikhar">
    <div id="a">Superman</div>
    <div id="b">Batman</div>
</div>
</body>
</html>

Upvotes: 0

Views: 248

Answers (5)

n1kkou
n1kkou

Reputation: 3142

Here is your answer: http://jsfiddle.net/S5rbz/
But it's wrong to have more items with the same id value on the same page. So replace the id's with class values.
Later edit: also, I think you want to remove the existing class, for each children, and add the new class, as if you keep adding the classes, they will be overwritten by the last named class(also keep in mind the cascading rule declarations).

Upvotes: 0

user3030212
user3030212

Reputation: 439

Try this:

$(document).ready(function() {
   $('.shikhar >').click(function(){
        $(this).addClass("highlight");
        $(this).siblings('div').addClass("selected");
   });
});

Upvotes: 0

LGVentura
LGVentura

Reputation: 1547

you cant use the same ID for different elements. use ID for only one element.

HTML:

<div class="shikhar">

    <div class="a">Spiderman</div>
    <div class="b">Hulk</div>

</div>


<div class="shikhar">

    <div class="a">Superman</div>
    <div class="b">Batman</div>

</div>

jQuery:

$('.shikhar').each(function(){
    $(this).on('click','.a, .b',function(){
        $(this).closest('.shikhar').children().removeClass('selected highlight');
        $(this).addClass('selected');
        $(this).siblings().addClass('highlight');
    });
});

Fiddle:

http://jsfiddle.net/me2DE/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You have duplicate ids. IDs should be unique. You can use the markup:

 <div class="shikhar">
  <div class="a">Spiderman</div>
  <div class="b">Hulk</div>
 </div>
 <div class="shikhar">
  <div class="a">Superman</div>
  <div class="b">Batman</div>
</div>

And JS:

$('.shikhar').click(function(){
        $(this).find('.a').click(function(){
            $(this).next().addClass("selected");
            $(this).addClass("highlight");

        });
        $(this).find('.b').click(function(){
            $(this).prev().addClass("selected");
            $(this).addClass("highlight");

        });
});

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128781

ID attributes must be unique. JavaScript stops searching as soon as it finds the first element with a matching ID. Simply change those IDs into classes instead:

<div class="a">Spiderman</div>
...
<div class="a">Superman</div>

Then change your jQuery selectors to $('.a') and $('.b') instead:

$(this).find('.a').click(function(){
    $(this).find('.b').addClass("selected");
    $(this).find('.a').addClass("highlight");
});

Upvotes: 1

Related Questions