Geek asks and answers

Slow performance with jQuery selector

I process over 600 forms in MVC format (php Codeigniter). Each of these forms has a button labeled "Advanced Options." When you click this button, a hidden div located in the same parent element switches, displaying more input and data fields. The problem is that the sibling switch runs quickly in the console, but when I press the actual button, it takes a very long time to start.

Using id is the recommended fix, but it is a little impractical when I have a lot of div elements to go through.

Here is my js file

jQuery(document.ready(function(){
    jQuery("form >button[name='more_data'].meta_button").click( function(){  
        jQuery(this).siblings("div.meta").toggle("fast");
    });
});

Here is the structure (there are 650 of these divs, with even more)

<div>
    <li id="bCIya8DZyr4idseJe5cbLA" class="even">
        <form action="url" method="post" accept-charset="utf-8">
            <div class="space_name"></div>
            <button name="more_data" type="button" class="meta_button">More Options</button>
            <input type="submit" name="Submit" value="Submit">
            <div class="meta" style="overflow: hidden; display: block;">
                <div class="meta_block">Set Estimates:
                    <div class="input_estimate">1:
                        <input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
                    </div>
                    <div class="input_estimate">2:
                        <input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
                    </div>
                    <div class="input_estimate">3:
                        <input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
                    </div>
                </div>
            </div>
        </form>
    </li>
</div>

Note. I am running jQuery 1.7.2

+5
2

(.on() ), , @jrummell, , , .

, , :

$(function(){
    $('.meta_button').on('click', function(){
        $(this).siblings('div.meta').toggle('fast');
    });
});

, , . , .

. , .

div.meta .

, toggle() ( - ).

:

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});
+3

jQuery.ui.css . css . " " .

0

More articles:


All Articles