Wrap first 3 items ONLY in div using jQuery

Question

I'm pulling in content to li's dynamically using ASP.NET. In the ul I want to wrap a div class around the first 3 li items of the list only. e.g.

                <ul class="wrapper">
                    <div class="recommend">
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                    </div>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                </ul>

The closest I've found to getting this result is a fiddle I found and edited. http://jsfiddle.net/ZuK4E/ but it does every 3 instead of just the first 3 only. All lis are the same so cant target any with ids.

Answer 1

DEMO

$('ul.wrapper > li:lt(3)').wrapAll('<div class="recommend"></div>');

lt(3) will select first three elements as index starts from 0.(i.e 0,1,2)

:lt documentation