JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<ul class="wrapper">
    <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>
        <li><a href="#"><img src="#" /></a></li>
        <li><a href="#"><img src="#" /></a></li>
        <li><a href="#"><img src="#" /></a></li>
</ul>

CSS

.recommend{ 
    border: 2px dashed orange;
    margin: 4px;
}

JavaScript

var a = $('ul.wrapper > li');

for( var i = 0; i < a.length; i+=3 ) {
    a.slice(i, i+3).wrapAll('<div class="recommend"></div>');
}