CODEWITHSUNDEEP
javascriptjquerycss
David Rodrigues
David Rodrigues

Reputation: 12532

"Incremented" CSS class in element

Let us suppose that we have a div element #a-node and a javascript method create one or more other div's called .b-node (not need inside this first) and it too add an #a-node class .b-node-enabled.

Exists a way to toggle/turn on the .b-node-enabled only if exists .b-node's connected specifically to #a-node?

Example:

I can use jQuery, if need and -webkit features.

REAL PROBLEM

I have a div popup that create a background, and I need turn on a classe on the main content body (that not inside this popup, and vice-versa, just appended to body too), and I can have more than one popup enabled at same time. I only need turn off the .b-node-enabled if no one popup is showing.

<body>
    <!-- MAIN CONTENT -->
    <div id="a-node" class="b-node-enabled">...</div>
    <!-- POPUPS -->
    <div class="b-node">...</div>
    <div class="b-node">...</div>
    <div class="b-node">...</div>
</body>

Upvotes: 0

Views: 69

Answers (1)

Eich
Eich

Reputation: 3788

I don't know if I really understood your question, but maybe this code snippet can help you (jQuery needed).

function updateANodeClass() {
    if ($(".b-node").length) {
        $("#a-node").addClass("b-node-enabled");
    } else {
        $("#a-node").removeClass("b-node-enabled");
    }
}

After you've added or removed one .b-node you'll have to call that function to update the class.

Upvotes: 2

Related Questions