Jquery nth-child 获取意外元素

Question

在使用 JQuery 的 nth-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"});

suggestedContentAmountRow 工作正常。对于 suggestedContentAmountRowMonthly，虽然它正在选择第二个和第六个元素（看起来只是从 suggestedContentAmountRow 停止的地方开始计算第四个元素）。那么我应该使用什么来代替 nth-child？

编辑：虽然这次每个 class 有 6 个元素，但有时会更多。通常不想要第 4 个元素，因为 9 我会想要第 4 个和第 7 个元素，或者有时可能每个第 2 个元素都想要，所以 eq 不起作用。

Answer 1

你不能。 CSS 中的子元素从父元素开始计算。因此，您如何定义类名并不重要。使用 css 实现此目的的方法是将第二组元素包装到父元素中。

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

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

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

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

祝你好运

编辑

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

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

Answer 2

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.

相同的错误结果。

-- 编辑

作为一个小小的"improvement"，你可以把它做成一个更简单的单一方法-

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

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

Jquery nth-child 获取意外元素

Jquery nth-child getting unexpected elements

jquery

jquery-selectors

编辑