.first() 有效，但不能 :first-child 或 :odd

Question

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

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

$(".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根据您的问题选择第一个、第三个等元素的原因。

jQuery Docs on :odd and :even

这可能有点令人困惑。

Answer 2

实际上

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

解决了。

Answer 3

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

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

此:odd将筛选匹配的元素集，因此您尝试将其分配给.tileItem本身，而不是为子元素提供右边距。如果您的磁贴项不是块元素(例如，通过设置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/(