CODEWITHSUNDEEP
javascriptjquery
StudioTime
StudioTime

Reputation: 23999

JQuery .not(find()) or - can it be used?

I have the following html:

<div class="profileRowHeader"><!-- div 1 -->
    <div class="folderIcon">
        <i class="glyphicon glyphicon-arrow-close"></i>
    </div>
</div>

<div class="profileRowHeader"><!-- div 2 -->
    <div class="folderIcon">
        <i class="glyphicon glyphicon-folder-open"></i>
    </div>
</div>

<div class="profileRowHeader"><!-- div 3 -->
    <div class="folderIcon">
        <i class="glyphicon glyphicon-folder-close"></i>
    </div>
</div>

When I click element with class .profileRowHeader, it does some stuff and changes the icon folder from closed to open. As in middle div above.

$this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');

Works great. Now, if I click on div 3 above, div 2 still has icon folder-open, so to combat this i close all the folder icons whenever any profileHeaderRow is clicked.

$(".folderIcon").removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');

Problem of course is that i'm using toggleClass, so the icon within the div i'm clicking will go to closed, then will toggle itself open again.

So, can I somehow find the class folderIcon within the div I clicked and not apply the class change to it. Hope that makes sense.

This is what I'm trying but simply does not work:

$(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').removeClass('greenDragBg').addClass('glyphicon-folder-close');

Full code as it is:

$('.profileRowHeader').click(function() {

        $(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');

        $this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');

    });

Summary: I have x number of divs with class profileRowHeader within each of them is a folder icon, all closed... when I click any of the divs with class profileRowHeader I want that icon to become open, the rest are closed. When I click that div again, it changes to closed icon. However, if it is left open and another div is clicked it should close the open one, and the new folder icon within the new profileRowHeader becomes open.

Hope that's a bit clearer

Upvotes: 1

Views: 94

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70179

This is how you can find elements inside the clicked element:

$(".folderIcon").not( $(this).find(".folderIcon") ) //...

Or a slightly shorter version setting a context for the selector:

$(".folderIcon").not( $(".folderIcon", this) ) //...

Upvotes: 2

Tommaso Resti
Tommaso Resti

Reputation: 5960

$('.profileRowHeader').click(function () {
    // reset state of all icons back to closed
    $('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');    

    $('.glyphicon').find(':first').toggleClass('glyphicon-folder-close glyphicon-folder-open');
});

Upvotes: 0

Related Questions