Estás mezclando jQuery y JavaScript aquí.

Puede usar className en un elemento al que se hace referencia en JavaScript. Para cambiar la clase de un elemento al que se hace referencia en jQuery, debe usar .addClass() . Además, dado que la id del atributo es única en un DOM, basta con especificar la id en el selector.

 $('#b1').addClass('class', 'red');

Solución jQuery:

 $('#b1').addClass('red');

 .Green { background-color: green; color: #ccc; } .red { background-color:red; color: #fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id= "a1"> <button id ="b1" class = "Green">Green</button> </div> <div id= "a2"> <button id ="b2" class = "red">Red</button> </div>

Solución de JavaScript: en lugar de usar className , le sugiero que use DOMTokenList.add() para agregar/eliminar clases a un elemento.

 var divId = document.getElementById('b1'); divId.classList.add('red'); 

 var divId = document.getElementById('b1'); divId.classList.add('red');

 .Green { background-color: green; color: #ccc; } .red { background-color:red; color: #fff; }

 <div id= "a1"> <button id ="b1" class = "Green">Green</button> </div> <div id= "a2"> <button id ="b2" class = "red">Red</button> </div>

$(divId).find devuelve un objeto jQuery.

className es una propiedad de HTML Element en Vanilla JavaScript.

Usted hace uno de los siguientes

• el método jQuery prop , para establecer una propiedad en un objeto jQuery.
• el método jQuery addClass , para agregar una clase en un objeto jQuery.
• convertir el objeto jQuery en un elemento ( ver respuesta SO )
• omita jQuery y use querySelector en su lugar.

Esto funcionará para usted:

 $("#a1 #b1").removeClass("Green"); $("#a1 #b1").addClass("red");