如何使用JQuery迭代类的元素

时间:2012-12-05 10:07:23

标签: jquery

在我的MVC应用程序中,我可以将datepicker类分配给需要日期字段的所有输入框。 之前我可以使用以下属性设置我的日期选择器(有效);

$(".datePicker").datepicker({ 
  showOn: 'both', 
  dateFormat: 'dd MM yy', 
  changeMonth: true, 
  changeYear: true, 
  yearRange: 'c-1:c+1', 
  beforeShowDay: noWeekendsOrHolidays });

现在我需要指定一个需要不同设置的出生日期选择器的日期。所以对于那个元素,我按如下方式包装元素;

<span class="allDates"><%: Html.EditorFor(model => model.Employee.Dob)%></span>

因此,当我的View被渲染时,来自View Source的Html看起来像;

<tr>
    <td style="text-align: right;">
        <label for="Employee_Dob">Date of Birth</label>
    </td>                    
    <td colspan="2">
        <span class="allDates">
            <input class="datePicker" id="Employee_Dob" name="Employee.Dob" type="text" value="" />
        </span>
    </td>
</tr>

现在我的jquery不起作用 - 我想这对某人来说是一个简单的解决方法;

$(function () {
    $(".datepicker").each(function() {
        if ($(this).parent().hasClass("allDates")) {
            $(this).datepicker({ showOn: 'both', dateFormat: 'dd MM yy', changeMonth: true, changeYear: true, yearRange: 'c-100:c' });
        } else {
            $(this).datepicker({ showOn: 'both', dateFormat: 'dd MM yy', changeMonth: true, changeYear: true, yearRange: 'c-1:c+1', beforeShowDay: noWeekendsOrHolidays });
        }
    });
});

1 个答案:

答案 0 :(得分:1)

为您的DOB字段添加一个额外的类,然后在其上再次创建日期选择器,并使用一组不同的选项:

class="datepicker dob"

$(".datepicker.dob").datepicker('destroy').datepicker({ 
    showOn: 'both',
    dateFormat: 'dd MM yy',
    changeMonth: true,
    changeYear: true,
    yearRange: 'c-100:c'
});

或者仅在特定的日期选择器上重新创建选项:

$("#Employee_Dob.datePicker").datepicker('destroy').datepicker({ 
    showOn: 'both',
    dateFormat: 'dd MM yy',
    changeMonth: true,
    changeYear: true,
    yearRange: 'c-100:c'
});