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

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

这是我在jsFiddle上的例子

HTML：

 
item 1
 
item 2
 
item 3
 
item 4
 
item 5
 
item 6
 
item 7
 
item 8
 
item 9
  

CSS：

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

有办法怎么做？

Answer 1

您必须检查第一行中的元素，并标记它们。 这样做的方法就是小提琴

此代码假设第一个元素是第一行（始终为true），并检查哪些元素具有相同的偏移量top，然后对其应用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"}); } }); 

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

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

因此，它不是添加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; } 

Answer 2

您可以在jquery中使用vanilla CSS Selector。
假设你有一个3 X 3的网格。

 $( ".container .item:nth-child(3n + 1)" ).css( "border-color","black" ); 

Answer 3

 $('.item').eq(0).addClass('special-border'); .special-border { border-color: #00f; } 

http://jsfiddle.net/8193xgfn/9/

Answer 4

您可以通过$（“。container”）获得容器的宽度，该容器具有名为“container”的css样式.width，

然后你可以计算出第一行中可以放入多少div，并将它放在像firstrow_divNums这样的变量中。

现在使用$（“。calculate”）。children（）来获取子div，

最后使用“for”循环从$（“。calculate”）。children（）。eq（0）到$（“。calculate”）。children（）。eq（firstrow_divNums），

现在你可以做你想要的，就像为任何元素添加css样式一样。