Tim Tim - 6 months ago 33
jQuery Question

how to get the elementid of a kendo datepicker in a jquery each loop

Let's say I have several INPUTs all having class='dp' and element ids (dp1, dp2, dp3, etc)

<INPUT id="dp1" class='dp' />
<INPUT id="dp2" class='dp' />
<INPUT id="dp3" class='dp' />

and these are being turned into kendo DatePickers:

$(".dp").kendoDatePicker( {....

and later we want to visit each of them in turn:

$(".dp").each( function (index, value) {


Inside the
block, how to get the
of the INPUT that underlies the current kendo DataPicker?


The kendoui takes the classnames of the input and adds them to the wrapper element that it creates, so if you have 3 inputs elements with the dp classname, after generating the kendoDatePicker on these 3 - you will now have 6 elements in your DOM that has the dp classname.

What you can do is take only the input.dp elements


or take the .dp elements that doesn't have the k-widget classname in them

$(".dp:not(.k-widget)").each( ... )

Here is a working snippet (using the second way):

$(".dp:not(.k-widget)").each( function (index, value) {
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<INPUT id="dp1" class='dp' />
<INPUT id="dp2" class='dp' />
<INPUT id="dp3" class='dp' />