Avatar of Rouchie
Flag for United Kingdom of Great Britain and Northern Ireland asked on

Help using :first

I have multiple tables, each containing multiple text fields and links.  When a particular link is clicked, I need to find the first text field that matches a given ID value.
I have this attempt, but it doesn't find the text field.  Any help would be appreciated:

function ReplaceFirstValue(idToClear, startCtrl) {
		var startCtrlId = '#' + startCtrl;
		var firstTextField = $(startCtrlId).parent('table').find("input[type='text'][id$='" + idToClear  + "']:first"); // fails (no error given)

Open in new window


Avatar of undefined
Last Comment

8/22/2022 - Mon
Gurvinder Pal Singh

please check if by removing first, you get any results or not.

then rather than using :first try using first()

What do you mean by removing?
Gurvinder Pal Singh

i meant that if you replace line 3 with

var firstTextField = $(startCtrlId).parent('table').find("input[type='text'][id$='" + idToClear  + "']").size(); // fails (no error given)

console.log(firstTextField );

what is the output? if the output is 0, then it means that without using :first also there was no result
Your help has saved me hundreds of hours of internet surfing.

I must be doing something so stupid here but I cannot see for looking...

I've simplified the function just to start with the ID of the link that is pressed, but the function even fails to find that.  Can you see what's wrong here?

function ReplaceFirstValue(idToClear, startCtrl){
		window.alert('executing...');  // works okay
		var startCtrlId = '#' + startCtrl; // presumably does not work
		$(startCtrlId).hide(200);  // does not work

Open in new window

<a onclick="ReplaceFirstValue('txt_skillLevel', this); return false;" href="#">Replace</a>

Open in new window


>> I need to find the first text field that matches a given ID value.

My first red light here is that the DOM does not allow multiple ID's with the same value, which would also explain why your code is unable to find anything.


I appreciate that thanks.  

The ID's aren't actually duplicated, but end with the same value.  That's why I was using the id$= selector in the original post.

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

Hi leakim971

That's works, thank you.  Right about the time you posted that I also found a solution using the following approach.  It turns out that parent should have been parents, but closest is better still.

$(startCtrl).closest('table').find(""input[type='text'][id$='"" + idToClear  + ""']"").first().val('Hello');

Open in new window

In your solution, could you please explain what effect table:eq(0) has?  I believe not including eq(0) works just as well also.

Sorry just copied out of ASP... mine should really read:

$(startCtrl).closest('table').find("input[type='text'][id$='" + idToClear  + "']").first().val('Hello');

Open in new window


ok, don't forget to close the question
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes

In your solution, could you please explain what effect table:eq(0) has?  I think that not including eq(0) gives the same result.

No it may return more than one depend your page
Same as closest here