I have a div with buttons:

<div id="buttonWrapper">
<button id="x"> X </button>
<button id="y"> Y </button>
<button id="z"> Z </button>
</div>

When you enter the page, there is a JQuery function that load userPreferences to a table called options. It's simple table, where buttons id from above have a value.

options = {x: "1", y: "1", z: "0"}

and I want to change class of elements on condition: when in options value is 1 button gets class 'active'. I got something like this:

$("#buttonWrapper").find("button", function () {
                if (options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1"){

                    $(this).className += " active";
                };
                return false;
            })

and It doesn't work. No errors, just simply doesn't work. What am I doing wrong?

On same page I have second part of this function, that attaches action on click to buttons:

.click(function () {
                modalPreferencesSave($(this).attr("id"), $(this).hasClass("active") ? "0" : "1");
                return false;
            });

and second part works like charm - action is assigned, and works just fine. Only adding style won't work:/

So the whole function looks like this :

$("#buttonWrapper").find("button", function () {
                if (options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1"){

                    $(this).className += " active";
                };
                return false;
            }).click(function () {
            modalPreferencesSave($(this).attr("id"), $(this).hasClass("active") ? "0" : "1");
            return false;
        });

First part - don't work - don't change style,, second part successfully adds onClick action

I have a div with buttons:

<div id="buttonWrapper">
<button id="x"> X </button>
<button id="y"> Y </button>
<button id="z"> Z </button>
</div>

When you enter the page, there is a JQuery function that load userPreferences to a table called options. It's simple table, where buttons id from above have a value.

options = {x: "1", y: "1", z: "0"}

and I want to change class of elements on condition: when in options value is 1 button gets class 'active'. I got something like this:

$("#buttonWrapper").find("button", function () {
                if (options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1"){

                    $(this).className += " active";
                };
                return false;
            })

and It doesn't work. No errors, just simply doesn't work. What am I doing wrong?

On same page I have second part of this function, that attaches action on click to buttons:

.click(function () {
                modalPreferencesSave($(this).attr("id"), $(this).hasClass("active") ? "0" : "1");
                return false;
            });

and second part works like charm - action is assigned, and works just fine. Only adding style won't work:/

So the whole function looks like this :

$("#buttonWrapper").find("button", function () {
                if (options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1"){

                    $(this).className += " active";
                };
                return false;
            }).click(function () {
            modalPreferencesSave($(this).attr("id"), $(this).hasClass("active") ? "0" : "1");
            return false;
        });

First part - don't work - don't change style,, second part successfully adds onClick action

• javascript
• jquery

• use $(this).addClass('active'); – jcubic Commented May 21, 2015 at 7:44
• Do you check your console (CTRL+SHIFT+i in chrome or firefox) to see what the error is? – Cagy79 Commented May 21, 2015 at 7:45
• @Cagy79 he already wrote that there is no error. – jcubic Commented May 21, 2015 at 7:46
• yes - I checked console - it was the first thing I did - no errors – Lukas Novicky Commented May 21, 2015 at 7:47
• You cannot pass a function as a parameter with find. Instead, you should use find("button").filter(function() {...}); – Sylvia Stuurman Commented May 21, 2015 at 7:49

4 Answers 4

$("#buttonWrapper button").each(function(){
    $(this).addClass("active");
});

The #buttonWrapper button selector selects all the buttons that are children to the element with id buttonWrapper, while each method iterates over them. DEMO

Use the .each() on the buttons. Then you can do a simple check if the option is 1 or 0. The else is not really needed in your case I think, but I love having it, to be sure that 0 has no active class

$("#buttonWrapper button").each(function () {         
    if (options[$(this).attr('id')] == '1')
        $(this).addClass('active');
    else
        $(this).removeClass('active');
});

You should use addClass:

$(this).addClass('active');

instead of

$(this).className += " active";

.find() doesn't have a callback so it will not work. I would remend you to use use $.fn.filter() and then $.fn.addClass()

$(document).ready(function() {

  var options = {
    x: "1",
    y: "1",
    z: "0"
  };
  $("#buttonWrapper button").filter(function() {
    return options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1";
  }).addClass("active");
});

.active {
  color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttonWrapper">
  <button id="x">X</button>
  <button id="y">Y</button>
  <button id="z">Z</button>
</div>