I need to find next textbox which is placed inside the same div or inside another div. I don't know the hierarchy of divs. But, I need to take the next textbox which has not a class name.
How to do that?
for an example: this is only example.. But this is not hierarchy of divs.
closest will not work as it only seaches up the dom tree. you need to create a collection of all input, find the current, then scan for the next:
$(".no-focus").focus(function() {
var me = this,
foundMe = false,
next = null;
$('input').each(function() {
if (foundMe && !$(this).hasClass('no-focus') {
next = this;
return false;
} else if (this === me) {
foundMe = true;
}
});
// next == next no-focus input, null if none found
});
using your new siblings code, i can get next control which has not css class "no-focus". but, if i continusly have the textbox with no-focus class that time is not working..
textbox-normal
textbox-nofocus
textbox-nofocus
textbox-normal
In the above case that code failed to get the last textbox.
I'm not around an area where I could test it, but you should be able to add the focus method within Bruce's function :
$(".no-focus").focus(function() {
var me = this,
foundMe = false,
next = null;
$('input').each(function() {
if (foundMe && !$(this).hasClass('no-focus') {
next = this;
this.focus(); // This should focus on your element without 'no-focus'
return false;
} else if (this === me) {
foundMe = true;
}
});
// next == next no-focus input, null if none found
});
You may also consider possibly using the .next() method to get the next element without the 'no-focus' class :
And if you want to remove specific elements from the 'tab order' so they won't automatically be focused when the 'Tab' button is pressed in a form, you can set the tabIndex attribute of your 'no-focus' elements :
Eswaran_MCA
Participant
911 Points
371 Posts
how to find next textbox control which has not particular css class using jquery?
Jan 31, 2013 10:30 AM|LINK
Hi all,
I need to find next textbox which is placed inside the same div or inside another div. I don't know the hierarchy of divs. But, I need to take the next textbox which has not a class name.
How to do that?
for an example: this is only example.. But this is not hierarchy of divs.
<div class="rowblock"> <div class="columnblock"> <div class="container"> <input type="text" id="t1" class="normal" /> </br> <input type="text" id="t2" class="no-focus" /> </br> </div> </div> </div> <div class="rowblock"> <div class="columnblock"> <div class="container"> <input type="text" id="t3" class="no-focus" /> </br> <input type="text" id="t4" class="normal" /> </br> </div> </div> </div> <div class="rowblock"> <div class="columnblock"> <div class="container"> <input type="text" id="t5" class="no-focus" /> </br> <input type="text" id="t6" class="normal" /> </br> </div> </div> </div>Thanks
R. Eswaran
r. eswaran
Rion William...
All-Star
26544 Points
4414 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Jan 31, 2013 12:19 PM|LINK
You could use the jQuery .closest() selector, which will find the nearest element that matches a specific selection.
//Selects the closest element that matches your selector $(this).closest('yourSelector');To select an element that doesn't have a class attribute, you could use the .not() selector :
//This will select all input / textbox elements that do not have a class $('input:not([class])')You can merge the two and select the closest element that does not have a class attribute
//This will return the closest input near your current one that does not have a class $(this).closest('input:not([class])');Eswaran_MCA
Participant
911 Points
371 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 01, 2013 10:25 AM|LINK
Hi Rion Williams,
Thanks for you replay. But not working.
I have used the following code to find the next textbox which is may be another div collection and css class name "no-focus".
$(".no-focus").focus(function() {
$(this).closest('input:not([no-focus])').focus();
});
any other code or am I used this wrongly?
r. eswaran
Rion William...
All-Star
26544 Points
4414 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 01, 2013 10:53 AM|LINK
You are close - you just need to change your selector to select the nearest input element that doesn't have the class no-focus :
$(".no-focus").focus(function() { $(this).closest('input:not(.no-focus)').focus(); });bruce (sqlwo...
All-Star
36656 Points
5438 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 02, 2013 09:46 PM|LINK
closest will not work as it only seaches up the dom tree. you need to create a collection of all input, find the current, then scan for the next:
$(".no-focus").focus(function() { var me = this, foundMe = false, next = null; $('input').each(function() { if (foundMe && !$(this).hasClass('no-focus') { next = this; return false; } else if (this === me) { foundMe = true; } }); // next == next no-focus input, null if none found });Rion William...
All-Star
26544 Points
4414 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 02, 2013 10:02 PM|LINK
Actually Eswaran, after looking over the structure of your layout, you could probably use the .siblings() selector in jQuery as instead :
$(".no-focus").focus(function() { $(this).siblings('input:not(.no-focus)').focus(); });Eswaran_MCA
Participant
911 Points
371 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 05, 2013 10:52 AM|LINK
Hi Rion Williams,
using your new siblings code, i can get next control which has not css class "no-focus". but, if i continusly have the textbox with no-focus class that time is not working..
textbox-normal
textbox-nofocus
textbox-nofocus
textbox-normal
In the above case that code failed to get the last textbox.
Any others!!!
r. eswaran
Eswaran_MCA
Participant
911 Points
371 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 05, 2013 10:54 AM|LINK
Hi bruce,
Thanks for your code. But, I need to set focus on the textbox which has "no-focus" class.
In your code where can I paste the code to focus.
r. eswaran
Rion William...
All-Star
26544 Points
4414 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 05, 2013 11:44 AM|LINK
I'm not around an area where I could test it, but you should be able to add the focus method within Bruce's function :
$(".no-focus").focus(function() { var me = this, foundMe = false, next = null; $('input').each(function() { if (foundMe && !$(this).hasClass('no-focus') { next = this; this.focus(); // This should focus on your element without 'no-focus' return false; } else if (this === me) { foundMe = true; } }); // next == next no-focus input, null if none found });You may also consider possibly using the .next() method to get the next element without the 'no-focus' class :
$(".no-focus").focus(function() { $(this).next('input:not(.no-focus)').focus(); });And if you want to remove specific elements from the 'tab order' so they won't automatically be focused when the 'Tab' button is pressed in a form, you can set the tabIndex attribute of your 'no-focus' elements :
$(".no-focus").attr("tabindex", "-1");Eswaran_MCA
Participant
911 Points
371 Posts
Re: how to find next textbox control which has not particular css class using jquery?
Feb 05, 2013 11:56 AM|LINK
Hi Rion Williams
Thanks for the code. Now it is working fine.
r. eswaran