检查哪个元素最接近其容器的底部。JS / jQuery

Question

如果我有以下页面:

<div class="container">
    <div class = "data" ></div>
    <div class = "data" ></div>
    <div class = "data" ></div>
<div>

是否有一种方法，与JS, jQuery或CSS3，检查哪个"数据"div是在底部?也就是说，最接近"容器"的底部。然后给这个div添加一个类

Answer 1

这是用数据类

将一个类分配给最后一个元素的jQuery方法

 $(document).ready(function(){
    $('.data').last().addClass("give class name");
 });

Answer 2

使用Jquery:

var lastElement = $('.container .data:last-child');
lastElement.addClass('yourClass');

使用原生js:

var div = document.getElementsByClassName("container")[0];
var lastElement = div.lastChild;
lastElement.className = lastElement.className + ' yourClass';

使用css

:

.container .data:last-child { }

Answer 3

您可以使用CSS中提供的:last-child选择器。

.data:last-child { }