JSFiddle - React, Tailwind, and code Playground

by Erick Petrucelli

HTML

<div class="parent">
    <a href="#">Some</a>
    <a href="#">Other</a>
    <a href="#">One More</a>
    <a href="#">Last</a>
<div>

CSS

div.parent {
    height: 28px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #ededed;
    border-radius: 6px;
}

div.parent a {
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    color: #111;
    border: 1px solid #ddd;
    background: #cbcbcb;
    display: block;
    float: left;
    border-radius: 6px;
    box-shadow: 1px 1px 3px #dedede;
}

div.parent a:hover {
    color: #fff;
    background: #ee8800;
    border: 1px solid #ffaa11;
    box-shadow: 0 0 2px #ffaa11, 1px 1px 3px #dedede;
}

JavaScript

// Which block below is better regarding performance and why?


/* Block 1: find all DOM elements when needed.

$("div.parent a").css("width", $("div.parent").width() / $("div.parent a").length - 2);

*/


/* Block 2: find only DOM children, use each(), parent() and siblings().

$("div.parent a").each(function() {
    $(this).css("width", $(this).parent().width() / $(this).siblings().length - 2);
});

*/


/* Block 3: find DOM parent first, use each() and find children based on context.

$("div.parent").each(function() {
    $("a", this).css("width", $(this).width() / $("a", this).length - 2);
});

*/