javascript - 第一行内联 block div 的 jQuery 选择器

Question

我有一些 display: 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

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

此代码假设第一个元素在一行中排在第一位(这始终为真)，并检查哪些元素具有相同的顶部偏移量，然后对它们应用 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"});   
    }
});

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

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

所以它不是添加 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;
}