CODEWITHSUNDEEP
javascriptjqueryhtmlonclick
ramojuraju
ramojuraju

Reputation: 61

On Click Change Multiple Div Classes in Current Div Only

Help Needed

I have some sets of divisions available, where all of the div's are with the same classes. Each div contains a button and some other div's.

<div class="red box border">
    <button class="changecolo">change</button>
    <div class="sb">t</div>
    <div class="box-small yellow">A</div>
</div>
<div class="red box border">
    <button class="changecolo">change</button>
    <div class="sb">t</div>
    <div class="box-small yellow">A</div>
</div>
<div class="red box border">
    <button class="changecolo">change</button>
    <div class="sb">t</div>
    <div class="box-small yellow">A</div>
</div>

and the css used

.box {
    width:100px;
    height:100px;
    display:block;
    margin:5px;
    float:left;
}
.box-small {
    width:20px;
    height:20px;
    display:block;
    margin:5px;
    float:left;
}
.sb {
    width:10px;
    height:10px;
    display:block;
    margin:5px;
    float:left;
}

.red {background-color:red;}
.yellow {background-color:yellow;}
.border{border:1px solid #000;}

Now, when i click on the button inside the div, the div with 'box-small' class has to be changed. It works with the following jQuery.

$('.changecolo').click(function () {
    var $this = $(this);
    $this.closest(function(){
        $('.box-small').removeClass('yellow');
        $('.box-small').addClass('red');
    });
});

but the problem is when i click on the button, styles for all the divs are changing. I want to change the current divs class only.

You can find the Fiddle for the same here http://jsfiddle.net/om749rbd/6/

Your valuable help will be appreciated. Thanks

Upvotes: 3

Views: 3757

Answers (7)

Tushar
Tushar

Reputation: 87203

In your click event handler add the following code.

$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');

This will find the closest parent having class box and then find the descendant having class box-small and then change the class of this element.

Demo

$('.changecolo').click(function() {
  $(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
.box {
  width: 100px;
  height: 100px;
  display: block;
  margin: 5px;
  float: left;
}
.box-small {
  width: 20px;
  height: 20px;
  display: block;
  margin: 5px;
  float: left;
}
.sb {
  width: 10px;
  height: 10px;
  display: block;
  margin: 5px;
  float: left;
}
.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
.border {
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="red box border">
  <button class="changecolo">change</button>
  <div class="sb">t</div>
  <div class="box-small yellow">A</div>
</div>
<div class="red box border">
  <button class="changecolo">change</button>
  <div class="sb">t</div>
  <div class="box-small yellow">A</div>
</div>
<div class="red box border">
  <button class="changecolo">change</button>
  <div class="sb">t</div>
  <div class="box-small yellow">A</div>
</div>

Upvotes: 2

Aru
Aru

Reputation: 1870

try this

Script

$('.changecolo').click(function () {
    $(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Use .siblings() in jquery .closest() is not work in your context.

$('.changecolo').click(function () {
    var $this = $(this);
    $this.siblings('.box-small').removeClass('yellow').addClass('red');
});

or

$('.changecolo').click(function () {
    var $this = $(this);
    $this.siblings('.box-small').toggleClass('yellow red');
});

Fiddle

Upvotes: 1

ozil
ozil

Reputation: 7117

$('.changecolo').click(function () {
    var that = $(this).siblings('.box-small');
    $(that).removeClass('yellow');
    $(that).addClass('red');

});

updates demo

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Try using $(this).closest() to get the parent div and then target the specific div using find()

Check the CODE

$('.changecolo').click(function () {
   var $this = $(this);
   var boxSmall = $this.closest('div').find('.box-small');
   boxSmall.removeClass('yellow').addClass('red');
});

Upvotes: 0

Afsar
Afsar

Reputation: 3124

Use can use $this selector(if HTML structure doesnt change) to get the next sibling like this:

$('.changecolo').click(function () {
        var $this = $(this);
        $this.closest(function(){
            $this.next().next().removeClass('yellow');
           $this.next().next().addClass('red');
        });
    });

Update fiddle: http://jsfiddle.net/om749rbd/11/

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

Your use of closest() is incorrect, try giving it a selector instead of a function. From there you can use $this.find() to get the .box-small elements. You can also use toggleClass() to change between the classes on each successive click. Try this:

$('.changecolo').click(function () {
    var $this = $(this);
    $this.closest('.box').find('.box-small').toggleClass('yellow red');
});

Updated fiddle

Upvotes: 3

Related Questions