Question

我有一个简单的列表，列表项没有任何特殊的类。

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

前端看起来像这样：

enter image description here

我希望能够定位每行中的最后一个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);

JSFIDDLE

我想我找到了答案..请通过调整窗口来检查..

Answer 2

检查此功能（我遇到了同样的问题并完成了此功能，您可以根据需要进行编辑）： 编辑工作重新调整

DEMO (resize)

var wrapDetector = function(element) {
var $elem = $(element);
var wrapper = $(element).parent();
var wrapperWidth = wrapper.outerWidth();
var expToggle = $('#main-menu-wrapper.main-menu-expanded #header-toggle-buttons');
wrapper.attr('data-width', wrapperWidth);
var elemTotalWidth = 0;
$elem.each(function() {
    elemTotalWidth += $(this).outerWidth();
});

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

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

wrapDetector('li');

添加

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

Answer 3

PURE CSS解决方案如何：

我们可以使用一系列媒体查询来实现这一目标。在媒体查询到位后，我们可以定位每行中的最后一项并更改其颜色。

现在这可能听起来像是一项繁琐的任务，但如果您使用的是LESS之类的预处理器 - 这不是一项如此困难或容易出错的任务。

我们需要做的就是根据我们的需求在LESS mixin中设置一些变量 - 我们得到了我们之后的确切布局。看看......

CODEPEN （调整大小以查看此操作）

用法很简单 - 只需调用LESS mixin：

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

mixin需要7个参数：

1）列表选择器

2）项目选择器

3）项目宽度

4）item-height

5）min cols

6）max-cols

7）保证金

我们可以将这些参数更改为我们需要的任何参数，并且我们将获得所需的布局

的 DEMO #2

这里的CSS（LESS）代码：

.box-layout(@list-selector,@item-selector, @item-width, @item-height, @min-cols, @max-cols, @margin) { @item-with-margin: (@item-width + @margin); @layout-width: (@min-cols * @item-with-margin - @margin); @next-layout-width: (@layout-width + @item-with-margin); @layout-max-width: (@max-cols * @item-with-margin - @margin); @layout-min-width: (@min-cols * @item-with-margin - @margin); @list: ~" `'\n'`.@{list-selector}"; @item: ~" `'\n'`@{item-selector}"; @{list} { display: block; margin: 0 auto; list-style: none; border: 5px solid aqua; overflow: auto; padding:0; color: white; min-width: @layout-min-width; max-width: @layout-max-width; } @{item} { height: @item-height; width: @item-width; margin: 0 @margin 32px 0; background: tomato; float:left; } @media (max-width:@layout-min-width) { @{list} { width: @item-width; min-width: @item-width; } @{item} { margin-right:0; background: green; } } .loopingClass (@layout-width, @next-layout-width, @min-cols); } .loopingClass (@layout-width, @next-layout-width, @iteration) when (@layout-width <= @layout-max-width) { @media (min-width:@layout-width) { @{list} { width: @layout-width; } @{item} { &:nth-child(n) { margin-right: @margin; background: tomato; } &:nth-child(@{iteration}n) { margin-right: 0; background: green; } &:last-child { background: green; } } } .loopingClass(@next-layout-width, @next-layout-width + @item-with-margin, @iteration + 1); } .box-layout(boxItemList,li,100px,120px,2,7,20px);

Answer 4

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

此解决方案假设如下：

所有<li>元素的排列方式就像它们在表格中一样，其中所有“单元格”<li>占据相同的宽度（包括边距）。
您已将.last-type课程应用于您要执行此操作的任何<ul>。

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

编辑：

我发现为什么有几种屏幕尺寸会导致元素不同步。向父<ul>添加零字体大小，并在<li> s中设置实际字体大小。

ul
{
    font-size: 0;
}

ul li
{
    font-size: 100%;
}

最后，我将ul li:last-child选择器添加到相同的ul li.marked规则中，以便最后一行中的最后一个元素也始终被标记，即使它没有到达结尾这条线。

Answer 5

如果我对你的问题的理解是正确的，那么每个li都有相同的宽度。

这是一个功能

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

}）;

希望我的演示可以帮助你

http://jsfiddle.net/4n7drqcz/

Answer 6

您可以使用边框中每个最后一个li的像素距离做一些事情。偏移距离顶部和左侧

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

我确定你可以拿出一些合理的最大距离，最后一个李将从边境出发，然后再做

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

Answer 7

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

<强> JS

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

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

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

calculateLIsInRow();

$(window).resize(calculateLIsInRow);

FIDDLE DEMO

Answer 8

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

通过查看左侧偏移量，如果它与父级匹配（调整为边距），那么前一个元素就是行尾，就像UL的最后一个子项一样。

它在行的最后一行添加了一个类，允许您使用CSS执行任何操作。它也会被触发窗口调整大小。

宽度与此解决方案无关。

var resizeTimer;

function findLastInRow(){
     var $list = $('ul'),
        offsetLeft = $list.offset().left,
        leftMargin = 5;
   /* reset */
    resetLastInRow($list);
    /* find end of rows and add 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');    
}
/* initiate using resize event and trigger resize on page load*/
$(window).resize(function(){
    /* throttle resize event */
    if(resizeTimer){
       clearTimeout(resizeTimer); 
    }
    resizeTimer=setTimeout(findLastInRow,50);

}).resize();

的 DEMO

Answer 9

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>

Answer 10

你可以用这个

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

Answer 11

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

$('li:nth-child(Xn)')

其中X是每行中元素的数量。对于附加的屏幕截图，您可以使用..

$('li:nth-child(10n)')

Answer 12

你可以得到这样的最后一个孩子

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

Answer 13

试试这个：

function getLastelement(){
var lastLi=$("ul>li:last-child");
// do your stuff on this lastLi which contains the direct last li child of your ul tag.
}

目标最后一排？

13 个答案: