Question

在JQuery的n-child遇到一些麻烦，希望有人能发现我的错误。

我的HTML有点像这样

<div class="suggestedContentAmountRow" style="width: 32%; margin-right: 1%; float: left; display: none;">
<div class="suggestedContentAmountRow" style="width: 32%; margin-right: 1%; float: left; display: none;">
<div class="suggestedContentAmountRow" style="width: 32%; margin-right: 1%; float: left; display: none;">
<div class="suggestedContentAmountRow" style="width: 32%; margin-right: 1%; float: left; display: none;">
<div class="suggestedContentAmountRow" style="width: 32%; margin-right: 1%; float: left; display: none;">
<div class="suggestedContentAmountRow" style="width: 32%; margin-right: 1%; float: left; display: none;">
<div class="suggestedContentAmountRowMonthly" style="width: 32%; margin-right: 1%; float: left; display: block;">
<div class="suggestedContentAmountRowMonthly" style="width: 32%; margin-right: 1%; float: left; display: block;">
<div class="suggestedContentAmountRowMonthly" style="width: 32%; margin-right: 1%; float: left; display: block;">
<div class="suggestedContentAmountRowMonthly" style="width: 32%; margin-right: 1%; float: left; display: block;">
<div class="suggestedContentAmountRowMonthly" style="width: 32%; margin-right: 1%; float: left; display: block;">
<div class="suggestedContentAmountRowMonthly" style="width: 32%; margin-right: 1%; float: left; display: block;">

我要做的是每个第4个元素都添加css clear：left。

如果我这样做

$('.suggestedContentAmountRow:nth-child(4n)').css({"clear": "left"});
$('.suggestedContentAmountRowMonthly:nth-child(4n)').css({"clear": "left"});

for suggestedContentAmountRow工作正常。对于suggestedContentAmountRowMonthly虽然它选择了第2个和第6个元素（看起来只是计算了于suggestContentAmountRow离开的第4个元素）。那么我应该使用什么而不是n-child？

编辑：虽然这次每个班级有6个元素，但有时会更多。一般不希望只有第4个元素和9一样我会想要第4个和第7个或有时可能想要每个第2个因此eq将无法工作。

Answer 1

css目前还没有这样做的方法，不过它会在未来的某个时刻到达那里......

这样说，它可以在一小段jQuery中使用 -

$('.suggestedContentAmountRow').filter(function(i) {
    return !(i % 4);
}).css({"clear": "left"});
$('.suggestedContentAmountRowMonthly').filter(function(i) {
    return !(i % 4);
}).css({"clear": "left"});

使用滤镜方法仅传递模数为4的滤波器（即除以4时没有余数）。你不能将它们都放在一个选择器中，因为它是需要过滤的选择器的结果，它会给出与css相同的错误结果。

- 编辑

作为一种轻微的“改进”，您可以将其变为更简单的单一方法 -

$.fn.every4th = function() {
    return this.filter(function(i) {
        return !(i % 4);
    });
};

$('.suggestedContentAmountRow').every4th().css({"clear": "left"});
$('.suggestedContentAmountRowMonthly').every4th().css({"clear": "left"});

Answer 2

你不能。 CSS中的子项自父元素开始计算。所以你定义的类名是什么并不重要。使用css实现此目的的方法是将第二组元素包装到父级中。

使用jQuery是的，你可以，但不能使用我在第一段中告诉你的行为的CSS选择器。你可以这样做：

$('.suggestedContentAmountRowMonthly').get(4)

要小心，因为它返回一个DOM对象而不是一个jQuery对象。你可以像这样 jqueryfy ：

var DOMobj = $('.suggestedContentAmountRowMonthly').get(4);
var jQueryObj = $(DOMobj);

祝你好运

修改

正如Rycochet在评论中所说，你可以使用eq()函数直接返回一个jquery对象：

$('.suggestedContentAmountRowMonthly').eq(4).css({clear:'left'});

Jquery nth-child获得意想不到的元素

2 个答案:

修改