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并为这些div分配一个'sec_1'类，为后四个分配'sec_2'。

我尝试过这样的事情：

$('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，则添加class sec_1，否则添加class sec_2。

Working 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

首先，您的class selector应为.form_row，而不是form_row，这将匹配所有<form_row>元素。

现在，您可以使用get()提供的index参数，而不是多次调用each()：

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

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

4 个答案: