The script task is to notify about the number of each brick that ends the line. Why does the script not always work correctly, for example, if the window is resized to a minimum, then possibly get the result:

Last brick on level: 3 brick2
Last brick on level: 51 brick3
Last brick on level: 147 brick5
Last brick on level: 195 brick6
Last brick on level: 243 brick7

Why is there no notification about brick number 4 or how to get after script finished array such as below for example when window resized to praticuly minimum?

  wall = {
      'level_0': ["Brick 1", "Brick 2"],
      'level_31': ["Brick 3", "Brick 4"],
      'level_62': ["Brick 5", "Brick 6"],
      'level_93': ["Brick 7", "Brick 8"]
    };

$(window).on('load', function() {

    const wall = document.querySelectorAll(".wall");
    function resort(wall) {
      for (const container of wall) {
        for (const child of container.children) {
          $("."   child.classList[0]).html(child.classList[0]   " "   child.offsetTop   " ");
          $("."   child.classList[0]).attr({"levelh": child.offsetTop});
        }
      }
    }

    window.addEventListener("DOMContentLoaded", e => {
      resort(wall);
    });

    window.addEventListener("resize", e => {
      resort(wall);

    });

    window.dispatchEvent(new Event('resize'));
    $level = "";
 
    $('li').each(function(index, value) {
      if ($level == "") {
        $level = $(this).attr('levelh');
      }
      if ($(this).next().attr('levelh') > $(this).attr('levelh')) {
     console.log("Last brick on level: "   $(this).attr('levelh')   " "   $(this).attr('class'));
      }
    }).promise().done(function () { 
});;
});

body {
  margin: 0;
  font-size: 23pt;
}

ul.wall {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: center;
  list-style: none;

}

ul.wall [class*="brick"] {
  background-color: green;
  text-align: center;
  margin: 3px;
  padding: 3px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul >
  <li > brick 1 </li>
  <li > brick 2 </li>
  <li > brick 3 </li>
  <li > brick 4 </li>
  <li > brick 5 </li>
  <li > brick 6 </li>
  <li > brick 7 </li>
  <li > brick 8 </li>
</ul>

CodePudding user response：

You're missing the logic to account for the very last brick. Your conditional here won't be true for the very last brick because there is no $(this).next():

if ($(this).next().attr('levelh') > $(this).attr('levelh')) {
    console.log("Last brick on level: "   $(this).attr('class')   " "   $(this).attr('levelh'));
}

A quick fix for this is to add the logic to account for this "end" condition too. Additionally, .attr returns a string, but you're storing int values. So you'll need to do parseInt($(this).attr('levelh)) to compare values correctly.

if (
    parseInt($(this).next().attr('levelh')) > parseInt($(this).attr('levelh')) ||
    $(this).next().attr('levelh') === undefined
) {
    console.log("Last brick on level: "   $(this).attr('class')   " "   $(this).attr('levelh'));
}

function resort(wall) {
  for (const container of wall) {
    for (const child of container.children) {
      $("."   child.classList[0]).html(child.classList[0]   " "   child.offsetTop   " ");
      $("."   child.classList[0]).attr({"levelh": child.offsetTop});
    }
  }

  // output the last bricks
  console.log('');
  $('li').each(function(index, value) {
    let thisLevel = parseInt($(this).attr('levelh'));
    let nextLevel = parseInt($(this).next().attr('levelh'));

    if (isNaN(nextLevel) || nextLevel > thisLevel) {
      console.log("Last brick on level: "   $(this).attr('class')   " "   $(this).attr('levelh'));
    }
  }).promise().done(function () {});
}

$(window).on('load', function() {

    const wall = document.querySelectorAll(".wall");

    window.addEventListener("DOMContentLoaded", e => {
      resort(wall);
    });

    window.addEventListener("resize", e => {
      resort(wall);
    });

    window.dispatchEvent(new Event('resize'));
});

body {
  margin: 0;
  font-size: 23pt;
}

ul.wall {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: center;
  list-style: none;

}

ul.wall [class*="brick"] {
  background-color: green;
  text-align: center;
  margin: 3px;
  padding: 3px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul >
  <li > brick 1 </li>
  <li > brick 2 </li>
  <li > brick 3 </li>
  <li > brick 4 </li>
  <li > brick 5 </li>
  <li > brick 6 </li>
  <li > brick 7 </li>
  <li > brick 8 </li>
</ul>