Run results for: show/hide vs for from root

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36

Browser: Chrome 92

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
hide/show	112840.1 Ops/sec
for	61671.4 Ops/sec

HTML Preparation code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<style>
    .hidden {
    display: none;
    }
</style>
<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div id="single">
    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">single</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="single-input1" class="input-group">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">lock</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">single</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="single-input2" class="input-group">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">lock</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">single</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="single-input3" class="input-group">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">lock</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">single</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="single-input4" class="input-group">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">lock</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="multiple">
    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">label</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="test-1-input-1" class="input-group input1">
                        <input class="form-control " value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-1-input-2" class="input-group input2 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-1-input-3" class="input-group input3 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <input class="form-control" value="3" disabled>

                        <div class="input-group-addon">
                            <span class="text-grey">%</span>
                        </div>

                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">label</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="test-2-input-1" class="input-group  input1">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-2-input-2" class="input-group input2 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-2-input-3" class="input-group input3 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <input class="form-control" value="3" disabled>

                        <div class="input-group-addon">
                            <span class="text-grey">%</span>
                        </div>

                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">label</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="test-3-input-1" class="input-group input1">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-3-input-2" class="input-group input2 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-3-input-3" class="input-group input3 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <input class="form-control" value="3" disabled>

                        <div class="input-group-addon">
                            <span class="text-grey">%</span>
                        </div>

                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">label</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div id="test-4-input-1" class="input-group input1">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-4-input-2" class="input-group input2 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                    <div id="test-4-input-3" class="input-group input3 hidden">
                        <input class="form-control" value="4">
                        <div class="input-group-addon">
                            <span class="">aze</span>
                        </div>
                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <input class="form-control" value="3" disabled>

                        <div class="input-group-addon">
                            <span class="text-grey">%</span>
                        </div>

                        <div class="input-group-addon">
                            <i class="">lock</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="form-group is-empty">
        <label class="col-sm-3 col-xs-3 ">a</label>
        <div class=" col-sm-9 col-xs-9">
            <div class="row">
                <div class="col-xs-5">
                    <div class="input-group">
                        <input class="form-control" value="5">
                        <div class="input-group-addon">
                            <span class="extra"></span>
                        </div>
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input class="form-control" value="3" disabled>

                            <div class="input-group-addon">
                                <span class="">%</span>
                            </div>

                            <div class="input-group-addon">
                                <i class="">p</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Script Preparation code:

var list = ["single-input1","single-input2","single-input3","single-input4"];
var values = [1,2,3,4];

Tests:

hide/show
$(".input1").addClass("hidden"); $(".input3").removeClass("hidden");
for
for(var i=0, len=list.length; i<len; i++) { var item = list[i]; var container = $("#" + item); container.find("input").val(values[i]); container.find(".extra").text("abc"); }

Run results for: show/hide vs for from root

hide/show

for