选择一组元素并使用 jQuery 分配一个类

Question

所以我想做的是将表单分成不同的部分，并使用 jQuery 显示/隐藏。 我有这样的事情：

我无法更改这一点：

<div class="form_row"></div>
<div class="form_row"></div>
<div class="form_row"></div>
<div class="form_row"></div>
<div class="form_row"></div>
<div class="form_row"></div>
<div class="form_row"></div>
<div class="form_row"></div>

使用 jQuery，我想选择前 4 个 div 并将类“sec_1”分配给这些 div，将“sec_2”分配给最后四个 div。

我尝试过做这样的事情：

$('form_row').get(0).addClass("sec_1");
$('form_row').get(1).addClass("sec_1");
$('form_row').get(2).addClass("sec_1");
$('form_row').get(3).addClass("sec_1");
$('form_row').get(4).addClass("sec_2");
$('form_row').get(5).addClass("sec_2");
$('form_row').get(6).addClass("sec_2");
$('form_row').get(7).addClass("sec_2");

但这没有用。有什么想法吗？

多谢！ 一个。

Answer 1

您的 class 选择器缺少前导 .。此外，无需将其拆分得太多并获取各个元素。

var $rows = $('.form_row');
$rows.filter(":lt(4)").addClass("sec_1");
$rows.filter(":gt(3)").addClass("sec_2");

或更简洁：

$('.form_row').filter(":lt(4)").addClass("sec_1")
    .end().filter(":gt(3)").addClass("sec_2");

编辑：阅读 jquery 文档中的注释后，性能会更好：

$('.form_row').slice(0,4).addClass("sec_1")
    .end().slice(4).addClass("sec_2");

http://jsfiddle.net/bstQ5 /

Answer 2

循环遍历每个选定的元素，如果索引等于或小于 3，则添加类 sec_1，否则添加类 sec_2。

工作 JSFiddle
http://jsfiddle.net/CvTb6/

HTML：

<div class="form_row">1</div>
<div class="form_row">2</div>
<div class="form_row">3</div>
<div class="form_row">4</div>
<div class="form_row">5</div>
<div class="form_row">6</div>
<div class="form_row">7</div>
<div class="form_row">8</div>

jQuery：

// Notice the '.' in front of the 'form_row', this indicates we are looking for a Class.
$('.form_row').each(function(index, value){ // For each .form_row selected
    if(index <= 3) // If index is equal to or less then 3
    {
        $(this).addClass("sec_1"); // Add this class
    }
    else
    {
        $(this).addClass("sec_2"); // Else add this class
    }
});

Answer 3

试试这个：

$('.form_row:nth-child(1),.form_row:nth-child(2),.form_row:nth-child(3),.form_row:nth-child(4)').addClass('sec_1');
$('.form_row:nth-child(5),.form_row:nth-child(6),.form_row:nth-child(7),.form_row:nth-child(8)').addClass('sec_2');

Answer 4

首先，您的 类选择器 应该是 .form_row，而不是 form_row，它将匹配所有 元素。

现在，您可以使用 indexget() > each() 提供的参数：

$(".form_row").each(function(index) {
    $(this).addClass("sec_" + Math.floor(index / 4 + 1));
});