CODEWITHSUNDEEP
jqueryasp.netformstraversaldescendant
Jesse Carter
Jesse Carter

Reputation: 21207

jQuery finding deeply nested input element

I'm using a form control in my project listed here

When I include it in my page it generates a whole whack of dynamic html to format everything nicely. However, I am trying to apply jQuery datepicker to a few of the input elements inside the form and I have no idea how to select the inputs I want.

I've nested the SuperForm directly inside a div called "bookings" so I know that I can use that as a starting point but I need to go through all of the descendants of that div till I find the right inputs, I know in which order they appear so I assume I can use nth-child(x) in here somewhere but so far I haven't had any luck. Any help would be greatly appreciated!

SOLVED! Here is my solution:

$("#bookings :input[type='text']:eq(2)").datepicker({...});

Upvotes: 1

Views: 1940

Answers (5)

QMaster
QMaster

Reputation: 3904

You right when using simple selector but if your main selector is complicated probably you couldn't use input selector inside main selector, So it's better to use 

.find(" :input[type='text']")

for example in sortable scenario if main selector like this:

$("#ulId").children('li:not(.ui-sortable-placeholder)')

you couldn't got any element if you coding as below:

$("#ulId").children('li:not(.ui-sortable-placeholder) :input[type='text']')

but we could use this:

$("#ulId").children('li:not(.ui-sortable-placeholder)').find(" :input[type='text']")

Hope this help.

Upvotes: 0

Jesse Carter
Jesse Carter

Reputation: 21207

SOLVED! Here is my solution:

$("#bookings :input[type='text']:eq(2)").datepicker({...});

Upvotes: 1

MaddHacker
MaddHacker

Reputation: 1128

Use the new input types supported in HTML5.

The new input types are:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

If you set those to date (or datetime) you can select all of the elements using:

$('input[type="date"]').each(function(index,element){
   $(element).datepicker...
}

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23094

You will obviously need some identifier/selector to filter your input elements.

$('#bookings').find('.applyDatePicker').datepicker({...});

Upvotes: 0

Machinegon
Machinegon

Reputation: 1885

Apply a class, attribute or id to the elements that you want or check every element this way.

$('#bookings input').each(function () {
   //Check here

 });

Upvotes: 0

Related Questions