CODEWITHSUNDEEP
jquery
kheya
kheya

Reputation: 7621

JQuery to remove class from sibling's elements

Each row has 3 images but one of those 3 images have a class active.

.active{border: 1px solid red;}

Active image has border around it (by class active). Two images have np border (class empty)

All I want, onclick remove the border from currently active image and add to the one that is clicked.

I tried all of these none worked:

$('#' + clkdImgId + ' img').parent().children('.active').removeClass('active'); // fails;
$('#' + clkdImgId + ' img').siblings().find("img.active").hide(); //fails
$('#' + clkdImgId + ' img').closest('.active').removeClass('active');//fails
$('#' + clkdImgId + ' img').closest('.image').children('.active').hide();//fails
$('#' + clkdImgId + ' img').closest('img.active').removeClass('active');//fails
$('#' + clkdImgId + ' img').closest('.active').hide();//fails


function setBrder(rowId, imgId)
{
  var clkdImgId = 'img' + rowId + imgId;//this gives me img12, img13 etc correctly

  //set class on the clicked 
  $('#' + clkdImgId + ' img').addClass('active');// this works

$('#' + clkdImgId + ' img').parent().children('.active').removeClass('active'); // fails;
    $('#' + clkdImgId + ' img').siblings().find("img.active").hide(); //fails
    $('#' + clkdImgId + ' img').closest('.active').removeClass('active');//fails
    $('#' + clkdImgId + ' img').closest('.image').children('.active').hide();//fails
    $('#' + clkdImgId + ' img').closest('img.active').removeClass('active');//fails
    $('#' + clkdImgId + ' img').closest('.active').hide();//fails

}


HTMLs:

<table><tr><td>
                        <div id="img11" class="image">
                            <img class="active" src=".."> <- REMOVE this .active
                        </div>
                        <div id="img12" class="image">
                            <img class="" src="..">       <- ADD HERE IF THIS CLICKED
                            <div onclick="setBrder('1', 2);" class="overlay">Set</div>
                        </div>
                        <div id="img13" class="image">
                            <img class="" src="..">
                                <div onclick="setBrder('1', 3);" class="overlay">Set</div>
                        </div>
                    </td></tr>
    <tr><td>
                        <div id="img11" class="image">
                            <img class="" src="..">
                            <div onclick="setBrder('2', 1);" class="overlay">Set</div>
                        </div>
                        <div id="img12" class="image">
                            <img class="active" src="..">                        
                        </div>
                        <div id="img13" class="image">
                            <img class="" src="..">
                                <div onclick="setBrder('2', 3);" class="overlay">Set</div>
                        </div>
                    </td></tr>

Upvotes: 1

Views: 2795

Answers (4)

ComWizd
ComWizd

Reputation: 300

Clear all active class then add it to the one you clicked:

 $('.overlay').on('click', function() {
       $('img').removeClass( "active" );
       $(this).parent().find('img').addClass("active");
 });

Upvotes: 1

Felix
Felix

Reputation: 38112

You don't need to have that complicated structure and redundant code like that, just do like this:

HTML

<table>
<tr>
    <td>
        <div id="img11" class="image">
            <img class="active" src=".."/>
        </div>
        <div id="img12" class="image">
            <img class="" src=".."/>
            <div class="overlay">
                Set
            </div>
        </div>
        <div id="img13" class="image">
            <img class="" src=".."/>
            <div class="overlay">
                Set
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div id="img11" class="image">
            <img class="" src=".."/>
            <div class="overlay">
                Set
            </div>
        </div>
        <div id="img12" class="image">
            <img class="active" src=".."/>
        </div>
        <div id="img13" class="image /">
            <img class="" src=".."/>
            <div class="overlay">
                Set
            </div>
        </div>
    </td>
</tr>
</table>

jQuery

$('.overlay').click(function() {
    $('.image img').removeClass('active');
    $(this).prev().addClass('active');
})

Updated Fiddle

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Looks like clkdImgId is the id of the div element, so you need to find the img elements inside the sibling elements of clkdImgId element

$('#' + clkdImgId).siblings().find('img').removeClass('active');

Demo: Fiddle

Upvotes: 0

A.T.
A.T.

Reputation: 26352

try this, you can remove all active classes and then add class to current clicked element

$(document).on('click','.image',function(){
     $(this).parent().find('img').removeClass('active');
     $(this).addClass('active');
});

Upvotes: 1

Related Questions