removeClass method not working jquery

Question

I'm having a main div container with 4 hidden divs inside it (I created a class in css with display:none, and added it to each of the inner divs) , the main div reads a value from a dropdown list and according to the read value unhides that many divs.

 <div id="ddlContainer">
            <div id="div1" class="hide">
                <center>Select option:</center>
                <select id="ddl1">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div2" class="hide">
                <center>Select option:</center>
                <select id="ddl2">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div3" class="hide">
                <center>Select option:</center>
                <select id="ddl3">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div4" class="hide">
                <center>Select option:</center>
                <select id="ddl4">
                      <!--options are added here-->
                </select>
            </div>
        </div>

But the removeClass isn't working for me.

  var diff, NumofHiddenDDLs = $("#ddlContainer").children().filter("[class=hide]");
        if (ReadValue > NumofHiddenDDLs.length) {
            diff = 1;
        }
        else {
            diff = 2;
        }
        if (diff == 1) {
            //TODO add class hide to shown divs
        }
        else {
            for (var i = 0; i < ReadValue; i++) 
                ($("#ddlContainer").children()[i]).removeClass("hide");
        }

Can anyone tell me what Im doing wrong? Thanks

Answer 1

You need an extra $:

$($("#ddlContainer").children()[i]).removeClass("hide");

This $("#ddlContainer").children()[i] will return the i-th children of the element with id ddlContainer, which would would be an html element and not a jQuery object. So you want have access to the jQuery methods. By wrapping this with a $ you will have a jQuery object and you will have access to the removeClass method.

Another way of achieving the same result is to make use Satpal answer, in which instead of accessing the array of children with an index to make use of the eq method and to get a jQuery object that would contain the element you want.