I have a simple list with list items that don't have any special classes.
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  etc..
</ul>
It looks like this on the front end:

I want to be able to target the last li in each row (the ones highlighted in green). However, I am not sure how since these li's don't have any classes and depending on the user's screen, it can be a different li that ends up last in a row. Is there a way to target the last li in a row?
Edit: I think there was some confusion. All of the li items are in ONE ul.
function calculateLIsInRow() {
    var lisInRow = 0;
    $('ul li').each(function() {
        $(this).removeClass("back");
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) {
               $(this).prev().addClass("back");
               // return false;
            }
            lisInRow++;
        } else {
            lisInRow++;   
        }
        if($(this).next().length > 0) {
        }
        else {
            $(this).addClass("back");
        }
    });
}
calculateLIsInRow();
$(window).resize(calculateLIsInRow);
JSFIDDLE
I think i have found the answer .. Please check by resizing the window..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With