目标行中最后一个li？

Question

我有一个简单列表，其中包含没有特殊类的列表项。

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  etc..
</ul>

前端看起来像这样：

我希望能够定位每行的最后一个li（以绿色突出显示的那些）。但是，我不确定这些li没有任何类，并且取决于用户的屏幕，因此可能是不同的li并排在最后。有没有一种方法可以定位连续的最后一个li？

编辑：我认为有些混乱。所有li项目都在一个ul中。

Answer 1

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);

Answer 2

您可以使用此

$("ul>li:last-child");

Answer 3

如果您知道每一行中有多少个元素，那么您可以使用此

Answer 4

您可以这样生下最后一个孩子

 $('ul li:last-child').css('color','red');

Answer 5

尝试一下：

Answer 6

检查此功能（我曾经遇到过同样的问题，并且做了此功能，可以根据需要对其进行编辑）：编辑可调整大小

Answer 7

PURE CSS解决方案如何：

Answer 8

你去。我知道做到这一点的唯一方法是使用jQuery计算容器ul的大小和内部元素的大小。

此解决方案假定以下条件：

Answer 9

如果我对您的问题的理解是正确的，则每个li的宽度相同。

这是一个功能

Answer 10

您可以使用最后一个li与边界的像素距离来做一些事情。偏移量获取从顶部到左侧的距离

var offset = $("#target").offset();
display("target is at " + offset.left + "," + offset.top + " of document");

Answer 11

这是我的方法。我正在计算每行占据多少列，然后使用for循环应用背景色。

JS

Answer 12

这里是一个解决方案，它查看每个元素的左偏移量，并与父偏移量和应用于li的任何边距进行比较。

通过查看左偏移量，如果它与父偏移量匹配（为边距调整），则前一个元素是行的结尾，UL的最后一个子元素也是。）>

它将类添加到最后一行，这将使您可以使用CSS进行所需的操作。它也将在触发窗口时调整窗口大小。

Answer 13

var foo = document.getElementById('foo');
// yields: Third  (3)
console.log(foo.lastElementChild.textContent);
<ul id="foo">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

您可以使用此

$("ul>li:last-child");