Accessing DOM element siblings using angular js

Question

I have a link function in an directive where i have a toggle functionality to edit the currently active DOM element's css content . How do i access the parent or child class of that DOM element .

A part of the directive :

   link: function(scope, element, attrs) {

        var title = angular.element(element.children()[0]),
            opened = true;

        title.bind('click', toggle);

        function toggle() {
            opened = !opened;
                element.removeClass(opened ? 'closed' : 'opened');                  
                element.addClass(opened ? 'opened' : 'closed');
            element.siblings().removeclass('opened').addclass('closed');  // What to do here  

        }

@asgoth : scope.$apply didnt work ...it took more time to load the file in the browser after i changed and angular binding to the front end failed — Adithya
– Adithya, Commented Jan 3, 2013 at 10:56

Mathew Berg · Accepted Answer · 2013-01-03 13:24:00Z

1

I would change your link function to this:

link: function(scope, element, attrs) {
    var title = angular.element(element.children()[0]),
        opened = true;

    title.bind('click', toggle);

    function toggle() {
        opened = !opened;
        element.parent().children().addClass("closed");
        element.parent().children().removeClass("opened");
        element.toggleClass("opened", opened);
        element.toggleClass("closed", !opened); //might be redundantdepending on the rest of your code

    }
}

I think you're doing it in the wrong order, if you first remove/add all the classes you need and then modify the element you'll get the result you're after. Simply select the elements parent, and then get all it's parent children. .children() selects only the direct descendents of the parent, while the .find() method which is similar would traverse down the hierarchy. The redundant code might not be necessary depending on if there are other ways to close the element.

answered Jan 3, 2013 at 13:24

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adithya Over a year ago

Thanks for the suggestion @MatthewBerg ...I ll look through that :)

Adithya Over a year ago

What do i do if i already have a "closed" class for one of the children elements ... ie if the function toggle already took place for that element , then a closed class would already exist ... > element.parent().children().addClass("closed"); then wouldnt i be adding the "closed" class again

Mathew Berg Over a year ago

No, it will just leave 1 closed class. If an element already has a class and you try to add it again it won't duplicate it.

Collectives™ on Stack Overflow

Accessing DOM element siblings using angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related