Here is a custom function that I created to address a similar issue and you are free to customize it as needed: CUSTOM FUNCTION FOR RESIZING

VIEW DEMO (resize)

var resizeDetector = function(element) {
var $elem = $(element);
var container = $(element).parent();
var containerWidth = container.outerWidth();
var toggleButton = $('#main-menu-wrapper.main-menu-expanded #header-toggle-buttons');
container.attr('data-width', containerWidth);
var totalElemWidth = 0;
$elem.each(function() {
    totalElemWidth += $(this).outerWidth();
});

var newContainerWidth = container.outerWidth();
var currentWidth = 0;        
$elem.removeClass('lastInRow last-row');
$elem.each(function() {
    var item = $(this);
    var elemWidth = item.outerWidth();
    currentWidth += elemWidth;        
    if (currentWidth > newContainerWidth) {
        item.prev().addClass('lastInRow');
        currentWidth = elemWidth;
    }
    item.attr('data-curWidth', currentWidth);        
});
var lastInRow = $(element + '.lastInRow');

if (lastInRow.length > 0) {
    lastInRow.last().nextAll().addClass('last-row');        
} else {
    $elem.addClass('last-row');
}
}

resizeDetector('li');  

INCLUDE THIS SECTION

$(window).resize(function() {
  resizeDetector('li');
});

Consider this elegant solution using ONLY CSS:

To achieve the desired layout, we can implement a set of media queries that specifically target the last item in each row and modify its color accordingly.

While this task may seem daunting, employing a preprocessor like LESS can simplify the process and reduce the chances of errors. By defining variables within the LESS mixin to suit our requirements, we can effortlessly obtain the desired layout. Take a closer look at the implementation below...

CODEPEN (Try resizing to witness it live)

The usage is straightforward - just invoke the LESS mixin as follows:

.box-layout(boxItemList, li, 100px, 120px, 2, 7, 20px);

This mixin takes 7 parameters:

1) Selector for the list

2) Selector for the items

3) Item width

4) Item height

5) Minimum number of columns

6) Maximum number of columns

7) Margin value

You can customize these parameters to fit your specific needs and obtain the desired layout effortlessly

DEMO #2

Here's the CSS (LESS) code snippet provided:

.box-layout(@list-selector, @item-selector, @item-width, @item-height, @min-cols, @max-cols, @margin)
{
   // mixin content here...
}

.loopingClass (@layout-width, @next-layout-width, @min-cols) {
   // additional function logic here...
}

.box-layout(boxItemList, li, 100px, 120px, 2, 7, 20px);

Here is a method using jQuery to calculate the sizes of the container ul and the inner elements for achieving a specific layout.

This approach requires:

1. All <li> elements are structured like cells in a table, each taking up the same width (including margins).
2. The .last-type class is applied to relevant <ul> elements.

jQuery:

$(function(){

    resize();

    $(window).resize(function(){
        resize(); 
    });
});

function resize()
{
    var ul = $("ul.last-type");
    ul.each(function(){
        var ulWidth = $(this).width();
        var liWidth = $($(this).find("li")[0]).outerWidth(true);
    
        var lisPerLine = parseInt(ulWidth / liWidth);
        $(this).find("li").removeClass("marked");
        $(this).find("li:nth-child("+lisPerLine+"n)").addClass("marked");
    });

}

CSS:

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

ul li
{
    display: inline-block;
    width: 75px;
    height: 75px;

    background: blue;
    margin: 15px;
    font-size: 100%;
}

ul li.marked,
ul li:last-child
{
    background: green;
}

JSFiddle

Edit:

To address discrepancies on certain screen sizes, set zero font-size on the parent <ul> element and define the actual font-size in the <li> elements.

ul
{
    font-size: 0;
}

ul li
{
    font-size: 100%;
}

Additionally, include the ul li:last-child selector in the same rule as ul li.marked to ensure the last element on the last line is always marked, even if it does not reach the end of the line.

If I understand your question correctly, you are asking about the scenario where every list item has the same width.

Here is a JavaScript function that addresses this:

function getLastItem(){
    $('li').removeClass('hello');
    var containerWidth = $('ul').eq(0).width();
    var totalItem = $('li').length;
    var itemWidth = $('li').eq(0).outerWidth(true); // accounting for margin
    var itemPerRow = Math.floor(containerWidth/itemWidth);
    var totalRows = Math.ceil(totalItem/itemPerRow);
    $('li:nth-child(' + itemPerRow + 'n), li:last-child()').addClass('hello');   
}

Feel free to use this code in your project and see how it works!

Check out the demo here

One strategy is to analyze the pixel distance between each final li element and the border. The offset function calculates the top and left distances.

var position = $("#target").offset();
display("The target is positioned at " + position.left + "," + position.top + " in the document");

Determine a reasonable maximum distance the last li element will be from the border, and then implement this logic:

var screenWidth = $(document).width();
var rightDistanceFromWindow = screenWidth - document.getelementsbyclassname("li").offset().left
if (rightDistanceFromWindow < reasonableMaximumDistance)
/*Change the color to green*/

My method involves determining the number of columns in each row and then using a loop to set background colors accordingly.

JavaScript Code:

function countColumnsInRow() {
    var columnsInRow = 0;
    $('ul li').each(function() {
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) return false;
            columnsInRow++;
        }
        else {
            columnsInRow++;   
        }
    });   

    $("ul li").css("background","#ffffff");

    for(i=columnsInRow; i<=$('ul li').length; i=i+columnsInRow)
    {
       $("ul li:nth-child("+i+")").css("background","green");
    }
    $("ul li:last-child").css("background","green"); 
}

countColumnsInRow();

$(window).resize(countColumnsInRow);

View Demo on JSFiddle

This solution focuses on comparing the left offset of each element with its parent's offset and any margins applied to the li elements.

By examining the left offset and adjusting for margins, it identifies the end of a row when the offset matches the parent’s. This is true for both the previous element in a row and the last child of the UL.

A special class is added to the last item in each row, which allows for customization using CSS. The function is also triggered by window resize events.

The solution does not rely on specific widths for elements.

var resizeTimer;

function identifyLastInRow(){
     var $list = $('ul'),
        offsetLeft = $list.offset().left,
        leftMargin = 5;
   /* Reset */
    resetLastInRow($list);
    /* Find end of rows and apply class */
    $list.children().each(function (i) {
        var $li = $(this);                   
        if ($li.offset().left === offsetLeft + leftMargin) {
            $li.prev().addClass('to-hide');
        }
    }).last().addClass('to-hide');    

}

function resetLastInRow($parent){
    $parent.children().removeClass('to-hide');    
}
/* Initialize on resize event and trigger on page load*/
$(window).resize(function(){
    /* Throttle resize event */
    if(resizeTimer){
       clearTimeout(resizeTimer); 
    }
    resizeTimer = setTimeout(identifyLastInRow, 50);

}).resize();

DEMO