.first（）有效，但不是：first-child或：odd

Question

我的DOM树中有一堆.tileItem元素。我想给1,3,5,7，......元素一个右边缘。

问题是，当我选择这样的元素时，它不起作用：

$(".tileItem:odd").css("margin-right","2%");

这既不起作用：

$(".tileItem").find(":odd").css("margin-right","2%");

我很好奇并尝试了以下内容：

$(".tileItem:first-child").css("margin-right","2%");

根本没有运气。

以下是有趣的部分：当我尝试这个时：

$(".tileItem").first().css("margin-right","2%");

它就像一个魅力。当然只有第一个元素被设置，但为什么这个工作而所有其他选择器都失败了？

Answer 1

.first()返回集合中的第一个元素，而不是第一个孩子

查看文档： http://api.jquery.com/first/

取决于你的html的样子，但如果你想让孩子们如何运作：

$('.tileItem').children(':even').css("margin-right","2%")

注意由于基于零的索引，:odd实际上选择了第二个元素，第四个元素等。即，奇数索引号1,3,5 ......这就是我根据您的问题使用:even选择第一个，第三个等元素的原因。

:odd和:even

上的jQuery文档

这可能有点令人困惑。

Answer 2

实际上

$(".tileItem:nth-child(2n+1)")

解决了。

Answer 3

你的选择对你想要完成的事情并不完全正确，这里有一个简短的解释原因：

$(".tileItem:odd").css("margin-right","2%");

此:odd将过滤匹配元素的集合，因此您尝试将其分配给.tileItem本身，而不是为子元素提供正确的边距。如果您的tileItems不是块元素（例如，通过设置display: block或display: inline-block），则无效。

$(".tileItem").find(":odd").css("margin-right","2%");

对于第一组中的每个项目，

find()将搜索与选择器匹配的直接后代。这意味着它会尝试将正确的边距应用于每个.tileItem中的每个第二个后代。

$(".tileItem:first-child").css("margin-right","2%");

此 应该有效，但仅当第一个子元素是块元素时才会起作用（参见http://jsfiddle.net/YfX7L/）