JSFiddle - React, Tailwind, and code Playground

by vandanasrivastava

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

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