0

我的 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%");

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

4

3 回答 3

1

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

请参阅文档： http ://api.jquery.com/first/

取决于您的 html 的外观，但如果您想要孩子们，这将如何工作：

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

注意，因为从零开始的索引，:odd实际上是选择第二个元素，第四个元素等。也就是奇数索引号1,3,5...这就是为什么我习惯:even选择第一个，第三个等。根据您的问题的元素。

jQuery 文档:odd和:even

这可能有点令人困惑。

于 2013-08-06T10:20:42.433 回答
0

实际上

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

解决了。

于 2013-08-06T10:17:40.080 回答
0

您的选择器对于您想要完成的任务并不完全正确，以下是原因的简要说明：

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

这:odd将过滤匹配元素的集合，因此您尝试将其分配给.tileItems 本身，而不是给子元素一个右边距。如果您的 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/）

于 2013-08-06T10:28:46.327 回答