Question

I am trying to implement a real-time search filtering function and am using $.each() in jQuery. Right now I’m just trying to loop through each element and print its text but am running into a maximum call stack exceeded issue. The list is about 50-60 items so I’m thinking size isn’t an issue at all and perhaps I’m running into some infinite recursion although I don’t think so. Below is my relevant HTML:

<div id="brands">
    <ul id="left_brands">
        <li><a class="brand_check" href="javascript:void">Vineyard Vines</a></li>
        <li><a class="brand_check" href="javascript:void">Brooks Brothers</a></li>
        <li><a class="brand_check" href="javascript:void">Coast Apparel</a></li>
        <!-- etc. -->
    </ul>
</div>

And here is the jQuery code that’s giving me the error:

$("#brand_filter input").keyup(function() {
    $.each("#brands li a", function() {
        alert($(this).text());
    });
});

Any suggestions are much appreciated.

Answer 1

Do this instead:

$("#brand_filter input").keyup(function() {
    $("#brands li a").each(function() {
        alert($(this).text());
    });
});

The recursion is occurring inside Sizzle’s getText–you’re iterating over the string characters themselves, not selector results. In this case I don’t see any benefit to doing it the way you thought you were, and and this seems more canonical (could just be my preference, however).