Here is my answer to the question, which I think is quite inefficient considering its length:

$('document').ready(function() {
	function makeEqual(blocks,dash) {
  var n =blocks;
  var widthSize = dash *10;
  var i=0;
  var equal = "";
  var contentName = "";
for(i=0;i<n;i++) {
  if(i==(n-1)) {
  equal = "<div id="+contentName+">"+produceDashStructure(dash*3)+"</div>"; 
  $("#"+contentName).css({marginLeft:i*widthSize , width:widthSize*3});
  	for(j=i;j>0;j--) {
      equal = "<div id="+contentName+">"+produceDashStructure(dash)+"</div>"; 
      $("#"+contentName).css({marginLeft:((n-j)+i+2)*widthSize , width:widthSize , bottom: (((n-j)*2))*55 , position: "relative" });
  	else {
      equal = "<div id="+contentName+">"+produceDashStructure(dash)+"</div>"; 
  $("#"+contentName).css({marginLeft:i*widthSize , width:widthSize});
  function produceDashStructure(dash) {  		
      var dashedStructure = "";
  		for(var i=0;i<dash;i++) {
      	  dashedStructure += "- "; 
      	return dashedStructure+"<br/><br/>"+dashedStructure;

#main {
  top: 10px;
  left: 10px;
  width: 30 px;
  position: relative;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">

I have written a lot of code for a small problem which I think is time-inefficient too, and I'm using the same methodology in my projects. Any improvement in this question will help me make all my projects more efficient.


It's hard to comment when the original question was very vague, the Original-OP (O-OP) failed to answer questions, different interpretations were made by the various respondants, and there's (currently) no accepted answer. Even worse, someone saw fit to remove the jQuery tag, implying that only a CSS solution would suffice - a view that did not come from the O-OP.

None of that was your fault.

The worst feature of this answer (and possibly others) is that the paradigm is reliant on a particular font size - change it and the step-formation falls apart.

You might consider something like the version below, which goes a long was to fixing that particular issue, and tidies up the code considerably :

$('document').ready(function() {
    function makeEqual($container, dashes, n) {
        var $step, scale = {}, i;

        // Create a single step and proactively measure its width and height in the target container.
        // IIFE allows working member `dashString` to be GC'd. 
        (function(dashString) {
            $step = $("<div/>").html(dashString + "<br/><br/>" + dashString).css({'position': 'absolute', 'width': 'auto', 'white-space': 'nowrap'}).appendTo($container);
            scale.w = $step.width();
            scale.h = $step.height();
        })(Array.apply(null, new Array(dashes)).map(function() {return '- '}).join('')); // pass in the required string of dashes and spaces

        // create staircases - descending and ascending in the same loop
        for(i=0; i<(n-1); i++) {
            $step.clone().css({ 'left': i * scale.w, 'top': i * scale.h }).appendTo($container); // descending steps
            $step.clone().css({ 'left': (2 * n - i) * scale.w, 'top': i * scale.h }).appendTo($container); // ascending steps
        // create bridge-piece
        for(i=0; i<3; i++) {
            $step.clone().css({ 'left': (n - 1 + i) * scale.w, 'top': (n - 1) * scale.h }).appendTo($container); // bridge-piece
    makeEqual($("#main").empty(), 5, 3);


Notes :

  1. no ids and no rediscovery of freshly appended DOM elements.
  2. no need for the dashStructure() function - instead, positioned clones of the prototype $step are appended.
  3. all steps are absolutely positioned on the same bases using left and top; the vagaries of mixed natural flow and relative positioning are avoided.
  4. the number of assignments is greatly reduced.
  5. consistent indentation!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.