内联块 div 第一行的 jQuery 选择器

Question

我有一些带显示的 div: inline-block; 我必须选择第一行 div 并将它们设置为例如不同的边框颜色，我需要在 javaScript (jQuery) 中进行。

这是我在jsFiddle上的示例

HTML :

<div class="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
    <div class="item">item 9</div>
</div>

CSS :

.container {
    border: 1px solid red;
    padding: 10px;
}

.item {
    display: inline-block;
    border: 1px solid green;
    width: 200px;
    margin: 10px;
}

有没有办法做到这一点？

Answer 1

您必须检查第一行中有哪些元素，并标记它们。一种方法是小提琴

此代码假设第一个元素在一行中的第一个（始终为真），并检查哪些元素具有相同的顶部偏移量，然后对它们应用 borderColor 更改

var top;
$('.container .item').each(function(i){
    var thistop = $(this).offset().top;
    if (i==0){
        top = thistop;
    }
    if (top==thistop){
        $(this).css({borderColor:"purple"});   
    }
});

请注意，在现实生活中的应用程序中，您将在调整窗口大小时使用事件处理程序，以在调整窗口大小时再次运行它。

我做了一个单独的小提琴来做事件处理程序版本。这需要将上面的代码包装在一个函数中，并稍微更改功能以添加/删除类，而不仅仅是添加 css（因为添加和手动删除 css get 很麻烦）。小提琴可以在这里找到。

因此，它不是添加 css，而是添加/删除一个类

markrow = function(){
        $('.container .item').each(function(i){
        ...
        if (top==thistop){
            $(this).addClass('special');
        }else{
            $(this).removeClass('special');
        }
    });
}
markrow();
$(window).on('resize',markrow);

特别是一个改变边框颜色的css类

.special {
    border-color:purple;
}